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iOS Tutorials: Delphi iOS Application 
Development 



This integrated set of tutorials walks you through development of an iOS 
application using RAD Studio: 

• After the initial setup tutorial, each tutorial shows you how to construct an 
iOS application using FireMonkey tools. 

• The tutorials demonstrate the recommended FireMonkey components to 
use in order to achieve a native look-and-feel in your iOS applications. 

Setup 



• Set Up Your Development Environment on the Mac 




• Set Up Your Development Environment on Windows 




Using Basic User Interface Elements 




Creating a FireMonkey iOS Application 



Using a Button Component with Different Styles in an 
iOS Application 
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• Using a Calendar Component to Pick a Date in an iOS 
Application 



• Using Combo Box Components to Pick Items from a 
List in an iOS Application 



FireMonkey FM ? 
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Using the Web Browser Component in an iOS 
Application 



Using Tab Components to Display Pages in an iOS 
Application 



• Using ListBox Components to Display a Table View in 
an iOS Application 



• Using Layout to Adjust Different Form Sizes or 
Orientations in an iOS Application 



Using Device Functionality 

• Taking and Sharing a Picture in an iOS Application 
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• Using Location Sensors on the iOS Device 
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Using the Notification Center on the iOS Device 



Accessing a Dabatase 
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Using InterBase ToGo in an iOS Application 



Using SQLite in an iOS Application 



Connecting to an Enterprise Database from an iOS 
Client Application 



See Also 

• FireMonkey Quick Start 

• Creating a FireMonkey iOS App 

• FireMonkey Application Design 

• iOS Code Snippets 

• iOS Mobile Application Development 



Embarcadero Technologies 



9 



iOS Tutorial: Set Up Your Development 
Environment on the Mac 

A FireMonkey application destined for the iOS target platform is tested initially on 
the iOS Simulator available on the Mac. The second half of the testing process 
uses the iOS Device target platform and requires a test iOS device connected to 
the Mac. 

• The first half of this tutorial describes the steps that you need to perform in 
order to run your iOS application on the iOS Simulator on the Mac. 

• The second half of this tutorial describes additional steps required in order 
to run your iOS Application on your iOS Device. 

Requirements on the Mac 

• OS X 10.7 Lion or 10.8 Mountain Lion 

(Neither OS is supported on legacy PowerPC- and 680x0-based Macintosh 
systems. All Macs since 2007 are Intel-based; all since 2008 are 64-bit, 
which Lion requires.) 

• iOS 5.1 and above 

• Latest version of Xcode and the iOS SDK installed, and the Xcode 
command line tools installed 

o Requires membership in one of several Apple Developer Programs, 
which are described in this topic under Sign up for a Developer 
account . 

• An iOS device connected to the Mac by USB port (required for testing or 
running your iOS app on the device) 

Steps to Configure Your Mac to Run Your iOS 
Application on the iOS Simulator 

To deploy an iOS application to the iOS Simulator on the Mac, you need to 
install the following tools on your Mac: 

• Platform Assistant ( PAServer) 

For debugging purposes, RAD Studio uses the Platform Assistant , an 

application that you must install and run on the Mac. 



Embarcadero Technologies 



10 



Xcode 



Xcode is the development and debug environment on the Mac, and 
provides the required development files for Mac OS X and iOS 
applications. 



Development on Windows. 
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Connecting to Mac over network 




Connecting to iOS Device 
via USB cable. 




Step 1 : Install the Platform Assistant 

As discussed, the Platform Assistant must be running on the Mac when you 
deploy an iOS app from your PC to either the iOS simulator or an iOS device. 

The Mac OS X installer for the Platform Assistant is named RADPAServerXE4.pkg, 

and it is available in two places: 

• In the PAServer folder inside the RAD Studio installation directory. 

For example, c:\p rogram Files\Embarcadero\RAD 
StudioMl . 0\PAServer\RADPAServerXE4 .pkg. 

• On the Web, for download to the Mac: 

http://installers. codegear . com/ re lease/ radstudio/11 . O/PAServer/RADPASer 
verXE4 . pkg 
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For further details, see Installing the Platform Assistant on a Mac . 
Step 2: Run the Platform Assistant 

In the Finder on the Mac, activate the .app file (RAD PAServer XE4.app) as 
follows: 

1 . Navigate to the top-level Applications folder. 

2. Double-click RAD PAServer XE4.app to start the Platform Assistant: 
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The Terminal window appears, displaying the Platform Assistant banner 
and the password prompt: 

Connection Profile password <press Enter for no password> 

Platform Assistant Server Version 3.0.4.92 

Copyright (c) 2009-2013 Embarcadero Technologies, Inc. 

Connection Profile password <press Enter for no password-*: 

Acquiring permission to support debugging. .. succeeded 

Starting Platform Assistant Server on port 64211 

Type ? for available commands 
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Either press Return, or enter a password for PAServer and then press 
Return. 



3. Next you are prompted to enter your Mac user password to allow the 
Platform Assistant to debug (take control of another process) your 
application. Enter your password, and select Take Control: 



Developer Tools Access is trying to take 
control of another process. Type your 
password to allow this. 



Name: 



Your Name 



Password: | ~| 



| Cancel | Take Control 



For more details about running the Platform Assistant, see Running the Platform 
Assistant on a Mac . 

Step 3: Install Xcode on the Mac 

Xcode is the development and debug environment on the Mac, and provides 
the required development files for Mac OS X and [OS applications. 

You can install Xcode from any of the following sources: 

• On your "Mac OS X Install" DVD, under Optional Installs, double-click 
Xcode.mpkg to install Xcode on your system. 

• At the Mac App Store , download Xcode for free. 

• As a registered Apple Developer, you can download the latest version of 
Xcode as a bundle (.dmg). To register and then download Xcode: 

1 . Register (free of charge) as an Apple Developer at 
http://developer.apple.com/programs/register/ . 

2. Download Xcode as a bundle from 
https://developer.apple.com/downloads . 
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Next Steps 

You have configured your Mac to run an iOS Application on the iOS Simulator. 

• To run an iOS Application now on the iOS Simulator, see iOS Tutorial: Set 
Up Your Development Environment on Windows PC to complete the 
configuration of your RAD Studio IDE. 

• To run your iOS Application on your iOS Device, please use the following 
steps on this page to complete the configuration of your Mac. Note that 
you can perform these steps after you test an application on the iOS 
Simulator. 



Additional Steps to Configure Your Mac to Run Your 
iOS Application on Your iOS Device 

The following additional steps enable you to run your iOS Application on your 
iOS Device. 



Development on Windows. 
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Testing with a Simulator on Mac. 



Connecting to Mac over network 




Connecting to iOS Device 
via USB cable. 
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Step 1 : Install the Xcode Command Line Tools on a Mac 



To install the necessary Xcode tools using Xcode on the Mac: 



1. Start Xcode on the Mac. 

2. Choose Preferences from the Xcode menu. 





Xcode 


File Edit View Navig 
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About Xcode 




Preferences... 


1 




Behaviors ► 1 



3. In the General panel, click Downloads. 

4. On the Downloads window, choose the Components tab. 
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5. Click the Install button next to Command Line Tools. 

You are asked for your Apple Developer login during the install process. 
For more details, see Installing the Xcode Command Line Tools on a Mac . 



Step 2: Sign Up for a Developer Account 

Membership in one of the iOS developer programs is a requirement for building, 
running, debugging, and deploying applications for iOS. 

You can join a developer program in either of the following ways: 

• As an individual developer. 

• As a member (or leader) of a team in an enterprise (business) program or 
university program. 

For more details, see Joining an iOS Developer Program . 
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Step 3: Request, Download and Install Your Development Certificate 

Applications that are deployed on the device (or on the iOS Simulator) need to 
be cryptographically signed before they run. The Development certificate 

contains information that is needed for signing the applications. Each individual 
(an individual developer or a team member) must have a unique development 
certificate, which can be used for multiple applications. 

For development teams, development certificates must be requested by each 
team member, and these requests must be approved by a team admin. 



Request Download and Install Your Certificate 



1 . In the Keychain Access application on your Mac, select from the 

Keychain Access menu: Certificate Assistant > Request a Certificate From 
a Certificate Authority: 





File Edit View vV ndow Help 




About Keychain Access 
Preferences... X, 
Keychain First Aid \3§A 






Certificate Assistant ► 


Open... 

Create a Certificate... 

Create a Certificate Authority ... 

Create a Certificate For Someone Else as a Certificate Authority... 


1 


Ticket Viewer XS€K 
Services ► 


Hide Keychain Access 86H 


Request a Certificate From a Certificate Authority... 


Hide Others XS6H 


Set the default Certificate Authority... 

Evaluate "Apple Application Integration Certification Authority"... 




Quit Keychain Access %Q 





Save the certificate request as a file, and then send it to your Certificate 
Authority by uploading it in the Apple iOS provisioning portal . 

o If you are a development team member for a 

corporate/organization program, your team administrator needs to 
approve your request. After your team administrator approves it, 
you can download the certificate, 
o If you are an individual developer, you should see a download 
option for your certificate shortly after you request it. See Apple 
documentation at: Creating signing certificates for details. 
2. Go to iOS Provisioning Portal . You can download the Development 
certificate after the status changes from Submitted to Issued: 
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3. Launch the Development Certificate by double-clicking it. It 
automatically loads in the Keychain Access application. 

Step 4: Register Your Device for Deployment 

Before a device can run user applications, it must be registered in the Apple 
Provisioning Portal . Devices are registered by their Unique Device ID (UDID). The 
UDID can be determined using Xcode, as follows: 

1 . Make sure your iOS device is connected to your Mac machine. 

2. Open Xcode and go to Organizer (Window > Organizer). 

3. In the Devices tab, click on your device. 

4. Next to the Identifier label is a string of characters: 




iPad 3 

Capacity 14.34 CB 

Model iPad Wi-Fi + 4C (LTE/GSM) 

Serial Number flP*^BB^BHV 

ECID 

Identifier HftflMMl 



Software Version | 6.1 (10B141) i } [ Restore iPad | 

Xcode cannot find the software image to install this version 

The Identifier string represents your device's UDID. 

o If you are an individual developer, register your device by adding 
the UDID in the Devices tab of the Apple Provisioning Portal . 

o If you are part of a company/organization, ask your team admin to 
register your device. 
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Step 5: Create and Install a Provisioning Profile 



Provisioning profiles are used for linking a developer and devices to a 
development team. This provisioning profile is required for running applications 
on an iOS device. 

• If you are an individual developer, you must create a provisioning profile. 
For specific information, see: Creating and Downloading a Distribution 
Provisioning Profile . 

• If you are part of a company/organization, your team admins must create 
a provisioning profile that you can use. 

After your provisioning profile is created, you must install it into Xcode, as follows: 

1 . Open Xcode on the Mac and go to the Organizer (Window > Organizer). 

2. In the Library section, select Provisioning Profiles and click Refresh. 

3. Xcode asks you to sign in with your Apple ID. Enter your credentials and 
select Log in. 



The provisioning profiles available to you are installed int o your Xcode: 
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4. Select a valid iOS provisioning profile and drag-and-drop it into the 
Provisioning profiles of your test device. 



You have configured your Mac to run your iOS Application on your iOS Device. 

To run your iOS Application, please see iOS Tutorial: Set Up Your Development 
Environment on Windows PC and complete the configuration of your RAD 
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Studio IDE. (If you have configured your PC as part of running your application 
on the iOS Simulator, you can skip this step.) 



See Also 

• iOS Tutorial: Set Up Your Development Environment on Windows PC 

• paserver, the Platform Assistant Server Application 

• Apple Developer Program 

• iOS Developer Program 

• Creating and Configuring App IDs 

• Creating signing certificates 

• iOS Provisioning Portal 

• Devices tab of the Apple Provisioning Portal 

• Create an Apple ID 

• Creating and Downloading a Distribution Provisioning Profile 

• Installing the Platform Assistant on a Mac 

• Running the Platform Assistant on a Mac 
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iOS Tutorial: Set Up Your Development 
Environment on Windows PC 



Before starting this tutorial, you should read and perform the following tutorial 
session: 

• iOS Tutorial: Set Up Your Development Environment on the Mac 

A FireMonkey application destined for the iOS target platform is tested initially on 
the iOS Simulator available on the Mac. The second half of the testing process 
uses the iOS Device target platform and requires a test iOS device connected to 
the Mac. To deploy an iOS Application to your device for debugging and 
testing purposes, RAD Studio uses the Platform Assistant , which you must install 
and run on the Mac. 



Development on Windows. Testing with a Simulator on Mac. 




This section describes the steps to set up your development environment after 
you configure your environment on your Mac. 
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Setting Up Your RAD Studio Environment 

The following configuration steps accelerate the iOS development with RAD 
Studio. 

Create a Connection Profile for the Mac 

1 . Open Tools > Options > Environment Options > Connection Profile 
Manager . 

2. Select Add: 
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3. Now you see the Create a Connection Profile wizard. Define a name for 
the connection profile, such as "My Mac". 

Make sure you select OS X as the target platform, and then click Next: 



Q Create a Connecton Profile 



Profile information 

The wizard wi asast you n creating a connection profile. Connection profiles are requred n order to 
deploy and run a project on a remote machne. More information on nstaino PAServer 



P*ease specify a profite name and select a platform for the profile. 
Profile name: 




My* 



atform: 



OSX 



Set as default for the selected platform 



<<Bacfc 



Next»[\ | [ Finish 



4. On the Machine Information page, set the name or IP address of the host 
Mac, a port number to use (the default port 6421 1 typically works), and 
an optional password (if you want to use a password). 

5. Click Test Connection and make sure that the connection profile 
succeeds with no error (you should receive the message "Connection to 
<hostname> on port <portnumber> succeeded"): 



0 Create a Connection Profite 
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Add an SDK to the Development System for the iOS Device Connected to 
the Mac 

1 . Open Tools > Options > Environment Options > SDK Manager : 
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2. Select Add. 

3. On the Add a New SDK dialog box, select iOS Device as a platform. 

4. Select a Platform to connect (such as the "iOS Device"): 



Add a New SDK 



Select a platform: 



OSX 



Select an SDK version: 



[7] Make the selected SDK active 



OK 








Help 




Cancel 
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5. After you select a profile, the IDE fills a Profile (such as "My Mac") and SDK 
version combo box with the list of SDK versions available on the target 
platform: 

w -i 

Add a New SDK 
Select a platform: 

iQS Device ▼ 



Select a profile to connect: 

My Mac,(Host: 1 Port Number: '64211') 



Select an SDK version: 
iPhoneOS 6.1 



[7] Make the selected SDK active 



OK 




Cancel 









Help 



Click OK to close the dialog. 

See Also 

• iQS Tutorial: Creating a FireMonkev iQS Application 

• Working with a Mac and a PC 

• Running Your Application on an iQS Device 

• Running Your Application on the iQS Simulator 

• FireMonkev Platform Prereguisites 

• Creating a FireMonkev iQS App 

• Mac OS X Application Development 

• Creating a FireMonkev Application 

• Apple developer.apple.com pages 

o iQS Developer Library 

o iQS Developer Library: Getting Started 

o iQS Dev Center 

o Provisioning an iQS Device 

o Preparing Your iQS App for Distribution in the App Store 
o iAd Network 
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iOS Tutorial: Creating a FireMonkey iOS 
Application 



This topic describes how to create a "Hello World" FireMonkey application for the 
iOS target platform . 

Before You Start 

To develop iOS applications using RAD Studio, you need to complete 
some important configuration steps. This tutorial assumes that you have 
completed all the necessary setup steps. 
For details, see: 

• iOS Tutorial: Set Up Your Development Environment on the Mac 

• iOS Tutorial: Set Up Your Development Environment on Windows PC 

Step 1 : Create a New FireMonkey Application for iOS 

1 . Select File > New > FireMonkey Mobile Application - Delphi: 

O F*HtoflkcyMeM*Appfcuibofl *' 1 11 

f trrMotikry HaMr *M*c«lwil 
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2. Select Blank Application. 

The FireMonkev Mobile Form Designer shows a new form for an iOS 
Application: 

F*r f<*t Umtti V*. W*cw *t**rt Ru* Cornpo*** Took Wmdow H*> .» • <V 

^#*3 t3 - •Ctfl fl fl » » ♦ » II fill * * . ♦ • ♦ • # j 




Step 2: Place Components on the FireMonkey iOS 
Form 

The first step in creating a FireMonkey iOS application is designing the user 
interface, the same first step when you are targeting desktop platforms. There 
are many reusable components available in the IDE for creating user interfaces. 

1 . Move the mouse pointer over the Tool Palette , and expand the Standard 
category by clicking the plus (+) icon next to the category name. 

2. Select the TEdit component and drop it onto the Form Designer . An 
instance of the TEdit component appears on the form: 



M Tool Palette 

Q, Search 
oa TStatutfar 

lT»fcar 
[«] TButton 

S THemo 
J TEdit 



S -I (HI 



Embarcadero Technologies 



26 



Repeat these steps, but now add a TLabel and a TButton component to the 
form. Select the button and change the Text property in the Object Inspector to 
"Say Hello". 



Now you should see three components on the Form Designer: 



F* C<M Um<*> V*. Ukw *oj*ci Run Connor** Took ***** H* Q 0«*Xi»raA 



3 Button'. 

3 LMl 



lom.ll 



/ Trje 



*■ 




Labell 



Say Hello 



*x»fed C«* Dwor »*«onf 



EP • £? * tiJ • 



(fejfrtpcti V^"' SbttttCii 



£ T*rton»t 



After you place these components on the Form Designer , the IDE automatically 
sets names for the components. 
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To see or to change the name of a component, click the component on the 
Form Designer, and then find its Name property on the Object Inspector and the 
Structure View: 



File Edit Search View Refactor Project Run Component Tools Window Hdp 

8 * Pita a-ttlffglft fi ► * f - ii m l * e 

ft Structure 



u> Default Layout 




For a TButton component, the component name is set by default to Buttonl (or 

Button2, Button3, depending on how many TButtons you have created in this 
application). 



The form on which these components are located also has a name. Select the 
background of the FireMonkey Mobile Form Designer , and select the Name 
property in the Object Inspector. The name of the form Forml (or Form2, 
Form3,...) is displayed. You can also locate the name of the form in the Structure 
View: 



B j Structure 






- nEEylK 




© ButtrWl 




[a] Erttl 








^ Object Inspector 


Forml 1 TFormlL 





| Properties | Events 



Margins 
Name 

shswA'Ctivatec 



(TBounds) 

Form 11 
V]True 
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You can easily switch to source code by selecting the Code tab at the bottom 
of the Form Designer or pressing the F12 key. You can switch between the Form 
Designer and the Code Editor any time you want: 




□ 



1: 1 



Insert 



Modified 



Coo^ , Design / History /' 



When you switch to the Code Editor you can see the source code that the IDE 
has generated. You should find three components defined (Editl, Label 1, and 
Button 1): 

[ 



Wricome Page] |g Unit 11 
□ unit Unitll; 

■ □ interface 



10 



System . SysUtils , System. . Types, System. .UlTypes, 
System. Classes, System. Variants, FMX. Types, 

FMX. Controls, FMX. Forms, FMX. Dialogs, FMX. StdCtrls, FMX. Edit; 
type 

□ TFormll = class (TForm) 



Butter. 1: TB^ttcr.; 
Editl: TEdit; 
Lanell: TLafcel; 



private 

{ Private declarations ) 
pnblic 

{ Public declarations ) 
end; 

var 

Formll : TFormll; 
i mpl eme ntat i on 
{$R * . fmx} 
end. 
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Step 3: Write an Event Handler in Delphi for a Button 
Click by the User 



The next step is defining an event handler for the TButton component. You can 
define event handlers for your FireMonkey iOS application in the same way you 
define event handlers for desktop applications. For the TButton component, the 
most typical event is a button click. 

Double-click the button on the Form Designer, and RAD Studio creates skeleton 
code that you can use to implement an event handler for the button click 
event: 



f^J Welcome Page 



H Unit 11 
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procedure 
begin 

I 

end; 



TForir.ll . ButtonlClick. (Sender : TOb j ect ) ; 



end. 



Now you can implement responses within the begin and end statements of the 
Buttonl Click method. 



The following code snippet implements a response that displays a small dialog 
box, which reads "Hello + <name entered into the edit box>": 



Labell. Text := 'Hello ' + Editl.Text + 



In Delphi, the quotation marks that surround string literals must be straight single 
quotation marks (that is, 'string'). You can use the plus (+) sign to concatenate 
strings. If you need a single quote inside a string, you can use two consecutive 
single quotes inside a string, which yields a single quote. 



While you are typing code, some tooltip hints appear, indicating the kind of 
parameter you need to specify. The tooltip hints also display the kinds of 
members that are supported in a given class: 



procedure TForir.ll . ButtonlClick (Sender : TOfcject 
30 begin 

Labell. te| 
end; 



end. 



property 


Text: string; 




property 


TextAifcgn: TText Align; Ltf 




property 


TextSettings: TTextSettings; 
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Step 4: Test Your iOS Application on the Mac (iOS 
Simulator) 

The implementation of this application is finished, so now you can run the 

application. You can click the Run button ( ) in the IDE, press F9, or select 
Run > Run from the RAD Studio main menu: 

Run Component Tools AQtime Window Help @ 

S I "Bjgll B I ^ ** I ♦ T ♦ T j ^ j Seconds 
^ Welcome Page R un (P9)| 

I procedure TForra2 . But to.nl Click (Sender : TObject) ; 
begin 
Lafcell.Text := 'Hello 1 + Editl.Text +- 1 ■ ■ ; 
end; 



By default, FireMonkey iOS applications run on the iOS Simulator target platform. 
You can confirm the target platform in the Project Manager : 



rojectl4.dproj - Project Manager 



Hi) 



IS - & 






% fa fa 






File 





gg 1 ProjecttGroupl 
E=}--|§p Projectl4 

+ /" Build Configurations [Debug) 
[=}■■ O Target Platforms (iOSSimulator) 

± □ iOS Device - iPhoneOS 6.0 - Device profile 

f f 3 2-bit Windows (Emulating: iOS) 
li- B Unit 11. pas 



When you run your application, it is deployed to the Mac and then to the iOS 
Simulator on the Mac. For our app, a form with an edit box and a button is 
displayed. Enter text into the edit box, and click the Say Hello button: 
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6 K>S Simulator Fik Edit Hardware Dtbug Window 




O * V B «3 Sat 12 SS PM Mawhiro Ara. Q 



£ nusahiroa»*< - paicrver - pas«rvr t - 80x24 
1 /Use rs/aosaM rear* i/A«eU cat lOAi/tabarcatfero/IMDPAS^rvtr/ll.t/paierver 
I airai-aacain:- aasahlroaralt /Usert/MsaMroaraWA#eUcat loAS/E«barca4ero 

I Sfrvtr/lt.ftypAirrver ; nit; 
IPUttpra Av»J\t«n1 Servrr V*ru»n |,t)»S»tM 
I Copyright Id W9-?»1J lab«r<*#>ro Tech«*logi t s . bat. 

I Re«*te Profits password -press Enter for r* passw«r4»: 

|A<4uiring p*r«ii»lon Jo support tfrbugging. . . lu<ce««t4 

I Starting Platfora Assistant Server on port 6*211 

I Typ* 1 for available <««aands 





Step 5: Test Your iOS Application on a Connected iOS 
Device 

If you complete the steps described in iOS Tutorial: Set Up Your Development 
Environment on the Mac and iOS Tutorial: Set Up Your Development Environment 
on Windows PC before creating your new project, you can now run your iOS 
app on an iOS device connected to your Mac by USB cable. 

To run your iOS app on a connected iOS device, first select the iOS Device 
target platform so that the Platform Assistant deploys the application to the 
connected iOS Device: 
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File 

%g ProjectGroup 1 
(El- [J] Project 14 

Build Configurations (Debug) 
[=}■■ O Target Platforms [jOSDevice) 

I 

©■■ Q iOS Simulator - Simulator profile 
f * 32-bit Windows [Emulating: iOS) 
GV B Unitll.pas 



iOS Device - iPboneOS 6.0 - Device profile 



After you select the iOS Device target platform, run your iOS app by clicking the 
Run button in the IDE, pressing f9 or selecting Run > Run. 

On your Mac, you might see a dialog asking your permission to code sign your 
iOS app. Select either "Always Allow" or "Allow" to sign your app. 



® 



codesign wants to sign using key ' 
" in your keychain. 

Do you want to alllow access to this item? 



Always Allow Deny Allow 



Then go to your iOS device and wait for your FireMonkey iOS app to appear. 
Watch for the FireMonkey launch image (available in $(BDS)\bin\Artwork\iOS): 



See Also 



iOS Tutorial: Using a Button Component with Different Styles in an iOS 
Application 

iOS Mobile Application Development 
Mac OS X Application Development 
iOS Code Snippets 
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iOS Tutorial: Using a Button Component 
with Different Styles in an iOS 
Application 

Buttons in FireMonkey iOS Applications 

FireMonkey defines various types of buttons, and you can use these different 
types of buttons with the same steps described here. The FireMonkey buttons 
include TButton and TSpeedButton . 

Following are some examples of different styles with Button components 
available for you to use in different parts of the user interface of your iOS 
application: 

• Buttons on the Form: 




• Buttons on the Navigation Bar (also known as Toolbar): 

m 



General 
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Define the Look and Feel for a Button Component 



After you place a new button on the FireMonkey Mobile Designer, you can 
specify some important properties for a selected component by using the 
Object Inspector . 

Select a component (in this case, a button), and then browse and change the 
value of some properties as follows: 

• Change the text displayed on the button surface by updating the value 
of the Text property. 

• Change the value of the Position.X and Position.Y properties (or drag the 
component using your mouse.) 

• Change the value of the Height and/or Width properties (or drag the 
edge of the component using your mouse.) 

• Click the down-arrow in the StyleLookup property. 

In the StyleLookup drop-down list, you can select a predefined Style 
based on how your component is to be used: 



£ Structure ®(ffj 


®Unitl6L 


- H Form 16 





B O ToolBar 1 
Q Button 1 



Object Inspt 

Button 1 TButton | 

| Properties | Events — 



Cursor 
Default 

DesignVisible I 
DisableFocusEffec 
DragMode 
Enabled 

EnableDragHighliCi 
Font 
Height 
HelpContext 
HelpKeyword 
HelpType 
HitTest 
IsPressed 
LiveBindings 
LiveBindings Desic 
Locked 
Margins 
ModalResult 
Name 
Opacity 
Padding 
PopupMenu 
Position 



RepeatClick 
RotationAngle 
RotationCenter 
Scale 

StavsPressed 
StyledSettings 
StyleLookup 
StyleName 



arrowdowntoolbuttonbor 
. arrowlefttoolbutton 
. arrowlefttoolbuttonbord* 
. arrowrighttoolbutton 
. arrowrighttoolbuttonborc 
, arrowuptoolbutton 
. arrowuptoolbuttonborde 
, arrowuptoolbuttonborde 
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Create a Segmented Control Using Button 
Components 



FireMonkey uses the Button component to define the Segmented Control, which 
gives users the ability to select one value from several options. 




To define a Segmented Control, use the following steps: 

1 . Place three TSpeedButton components from the Tool Palette . Place the 
TSpeedButton components next to each other using your mouse: 




2. Select the first component, and change its StyleLookup property to 
segmentedbuttonleft: 




3. Select the second component, and change its StyleLookup property to 
segmentedbuttonmiddle. 

4. Select the third component, and change its StyleLookup property to 
segmentedbuttonright. Now all three buttons look like a Segmented 
Control: 





peed Button 


peed Button 


peed Button 







5. Select each component, and change the Text property as you like: 
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6. Click and drag these three buttons to select these components: 




7. Set the GroupName property to a unique name such as 
LocationSegments: 




8. To specify that one of these components is to appear as Pressed by 
default, set the IsPressed property for one component to True: 




Create a Scope Bar on a Toolbar Component 

You can define a Segmented Control on a toolbar; this is also known as a Scope 
Bar, a segmented control that can be used to control the scope of a search. 



Use the same TSpeedButton controls as in the previous steps, but with the 
following values for the StyleLookup property: 



toolbuttonleft 

toolbuttonmiddle 

toolbuttonright 




Middle 



Right 
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See Also 

• iOS Tutorial: Creating a FireMonkey iOS Application 

• iOS Tutorial: Using a Calendar Component to Pick a Date in an iOS 
Application 

• FMX.StdCtrls.TButton 

• FMX. Controls JStyledControLStyleLookup 

• FMX.StdCtrls.TToolBar 
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iOS Tutorial: Using a Calendar 
Component to Pick a Date in an iOS 
Application 



Calendar in FireMonkey iOS Applications 

FireMonkey uses the TCalendarEdit component to wrap a calendar component 
or datepicker for the iOS target platform: 




November 


22 


2011 


December 


23 


2012 I 


January 


24 


2013 | 


February 


25 


2014 



You can easily use the TCalendarEdit component with the following simple 
steps: 

I . Select the TCalendarEdit component in the Tool Palette , and drop the 
component onto the FireMonkey Mobile Form Designer . To find the 
component in the Tool Palette, enter the first few characters ("Cale") in 
the search box ): 



Hji! Tool Palette 








G Additional 


I 




Q TCalendar 




(wEtl TCalendarEdit k 


□ Layouts 




TScaledLayout 
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After you drop the component, you can see your TCalendarEdit 
component on the Mobile Form Designer: 

— 

1/24/2013 

2. Basically, that's it. Run your application on either the iOS Simulator or your 
connected iOS Device. After you tap TCalendarEdit, the calendar control 
appears, and you can select a date. 

Implementing an Event Handler for User Changes to 
the Date 

After the user changes the date, the OnChange event is fired. You can 
implement an event handler for the OnChange event to react to the user's 
action. 

To implement an OnChange event handler: 

1 . Select the TCalendarEdit component. 

2. In the Object Inspector , open the Events page, and double-click the 
empty space next to OnChange. 

3. Write code as follows: 



procedure TForm2 5 . CalendarEditlChange (Sender : TObject) ; 
begin 

ShowMessage (FormatDateTime ( 'dddddd' , CalendarEditl . Date) ) ; 
end; 



This code shows a message dialog with a date selected. The FormatDateTime 
function converts the selected date to a specified format (in this case dddddd 
gives long-style date format): 
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See Also 

• iOS Tutorial: Using a Button Component with Different Styles in an iOS 
Application 

• iOS Tutorial: Using Combo Box Components to Pick Items from a List in an 
iOS Application 

• Date and Time Support 

• Type conversion routines 
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iOS Tutorial: Using Combo Box 
Components to Pick Items from a List in 
an iOS Application 

Implementing a Picker in FireMonkey iOS Applications 

On the iOS platform, FireMonkey wraps the Picker component with the 
TComboBox component: 




To define a picker and the list items to pick: 

1 . Select File > New > FireMonkey Mobile Application - Delphi > Blank 
Application . 

2. Select the TComboBox component in the Tool Palette , and drop it on the 
FireMonkey Mobile Form Designer . 

To find TComboBox, enter the first few characters ("Com") in the Search 
box of the Tool Palette: 



Tool Palette 



- Standard 



M TComboBox 



- Additional 



Name: TComboBox 
H TCarneraCom Unit: FMX.ListBox 
H TComboEdit Packa 9 e: dclfmxstdlSO.bpl 

Supported platforms: 
l__j TComboTrad iOS Device 
□ Colors 32-bit Wind ows 

64-bit Windows 
TComboColor g ^ y 

W TColorCombo iOS Simulator 
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3. After you drop the component, you can see the TComboBox component 
on the Form Designer. 

Right-click the TComboBox component and select Items Editor...: 



W (BP W 




Items. Editor... 






Add Item 




Edit ► 1 



4. To define items, click Add Item several times. 



[ ■=■ | \s\ 



@ Items Designer 



LisiBcxltenl 
Lis:E.cxIterm2 
Lis:Bcxlten3 



T_'st3ox::eT 



Add Iierr 



Delete 



5. In the Structure View , select ListBoxlteml (the first item in the list). 

6. In the Object Inspector , edit the Text property for ListBoxlteml . 

In this example, (the fifty states in the USA), the first item in the list is 
"Alabama". 



Structure 




FormZ^^^^ 

^^omboBoxl 



Q ListBoxItern 1 
JJ LIIUflWllImT 

Q ListBoxlteml 
Q ListBoxlteml 
Q ListBoxItemS 



] 



f <% Object inspector 



ListBoxlteml TUstBoxItem 




TabOrder 


0 

i *i 


> Text 


ListBoxItemlJ 


TextAlign 
.Touch 


[TTouch Ma l^. , ^ 


VitJIlJIU 




Width 


19 [i 



fgj Welcome Page j|] UnitZ7 
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7. Edit other items as well, such as Alaska, Arizona, Arkansas, California, 
Colorado, and so forth. 

8. Run the application on either the iOS Simulator or the iOS Device target 
platform. 

After you tap TComboBox, the Picker control appears, and you can select 
an item. 

Building a List of Items Using Code 



To build a list of items using code, you can use the Add method as follows: 



procedure TForm27 


. FormCreate ( Sender : TOb j ect ) ; 


begin 








ComboBoxl 


. Items 


.Add 


'Alabama' ) ; 


ComboBoxl 


. Items 


.Add 


'Alaska' ) ; 


ComboBoxl 


. Items 


.Add 


'Arizona ' ) ; 


ComboBoxl 


. Items 


.Add 


'Arkansas ' ) ; 


ComboBoxl 


. Items 


.Add 


'California' ) ; 


// Other 


states 


can 


be listed here 


ComboBoxl 


. Items 


.Add 


'Virginia ' ) ; 


ComboBoxl 


. Items 


.Add 


( 'Washington ' ) ; 


ComboBoxl 


. Items 


.Add 


'West Virginia'); 


ComboBoxl 


. Items 


.Add 


'Wisconsin ' ) ; 


ComboBoxl 


. Items 


.Add 


( 'Wyoming ' ) ; 


end; 









Displaying a Specific Item 

The currently selected item is specified by the Itemlndex property. Itemlndex is 
an integer value that is specified using a zero-based index (that is, the first item is 
zero). 

To display the list with the fifth item selected ("California" in the following sample 
code), specify Itemlndex as follows: 



procedure TForm2 7 . FormCreate (Sender : TOb j ect) ; 
begin 

ComboBoxl . Items . Add ( ' Alabama ' ) ; 
ComboBoxl . Items .Add ( 'Alaska' ) ; 
ComboBoxl . Items .Add ( 'Arizona ' ) ; 
ComboBoxl . Items .Add ( 'Arkansas ' ) ; 
ComboBoxl . Items .Add ( ' California ' ) ; 
// Other states can be listed here 

// Index of 5th item is "4" 
ComboBoxl . Itemlndex := 4; 
end; 
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If you do not know the index value, you can find the value by using the IndexOf 
method as follows: 



procedure TForm2 7 . FormCreate (Sender : TObject); 
begin 

ComboBoxl . Items . Add ( ' Alabama ' ) ; 
ComboBoxl. Items. Add ( 'Alaska' ) ; 
ComboBoxl . Items .Add ( 'Arizona ' ) ; 
ComboBoxl . Items .Add ( 'Arkansas ' ) ; 
ComboBoxl . Items .Add ( ' California ' ) ; 
// Other states can be listed here 

ComboBoxl . Itemlndex := ComboBoxl . Items . IndexOf (' Calif ornia ') ; 
end; 



Implementing an Event Handler for the User's 
Selection 

After the user selects an item, the OnChange event is fired. To respond to the 
user's action, you can implement an event handler for the OnChange event. 

To implement an OnChange event handler: 

1. Select the TComboBox component. 

2. In the Object Inspector , open the Events page, and double-click the 
empty space next to OnClick. 

3. The Code Editor opens. Write code as follows: 



procedure TForm2 7 . CalendarEditlChange (Sender : TObject); 
begin 

ShowMes sage (Format (' Item %s at Index %d was selected. 
[ComboBoxl . Selected. Text , ComboBoxl . Itemlndex] ) ) ; 

end; 



This event handler displays a message dialog that indicates the item that was 
selected. 
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The Format function returns a formatted string assembled from a format string 
and an array of arguments: 




See Also 

• iOS Tutorial: Using a Calendar Component to Pick a Date in an iOS 
Application 

• iOS Tutorial: Using Tab Components to Display Pages in an iOS Application 

• iOS Mobile Application Development 

• Mac OS X Application Development 
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iOS Tutorial: Using the Web Browser 
Component in an iOS Application 

Using the Web Browser Component in FireMonkey iOS 
Applications 

On the iOS platform, FireMonkey wraps the Web Browser component as the 
TWebBrowser component. This topic describes how to create a simple 
FireMonkey Web Browser application for iOS. 





1:01 PM 
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[ http://www.google.com/ 


i 


Web Images 


Sign in 



Gougle 



® 



Restaurants Coffee Bars Fast Food Ne, 
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Step 1 : Design the User Interface 



1 . Select File > New > FireMonkey Mobile Application - Delphi > Blank 
Application . 

2. Select the TToolBar component in the Tool Palette , and drop it on the 
FireMonkey Mobile Form Designer . To find TToolBar, enter a few characters 
(such as "tool") in the Search box of the Tool Palette: 



*4. Tool Palette f S3 


ft H k 1 


Q, tool| 


El Standard 






[D0 TTooBar 










Name: TToolBar 
Unit: FMX.StdCtrls 
Package: ddfmxstdlSO.bpl 
Supported platform:: 

iOS Device 

32-bit Windows 

64-bit Windows 

OSX 

iOS Simulator 





3. After you drop the component, you can see the TToolBar component at 
the top of the Mobile Form Designer: 




4. Select the TButton component in the Tool Palette and drop it on the 
ToolBar. 

5. Select the Button Component on the Mobile Form Designer, and then 
select priortoolbuttonbordered in the StyleLookup property in the Object 
Inspector . 

The priortoolbuttonbordered StyleLookup value for TButton adds a Back 

button label in the iOS style: 
For more detail about selecting a style in FireMonkey iOS applications, see 
iOS Tutorial: Using a Button Component with Different Styles in an iOS 
Application . 
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6. Select the TEdit component in the Tool Palette and drop it on the ToolBar. 
Make sure the size of the Edit control is wide enough to fill the area of the 
ToolBar: 




7. Select the TWebBrowser component in the Tool Palette and drop it on the 
form. 

8. Select the Web Browser component on the Mobile Form Designer, go to 
the Object Inspector and select alClient for the Align property. 

After you complete these steps, the form should look like the following 



picture: 
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Step 2: Write an Event Handler to Open a Web Page 
when the User Changes the URL in the Edit Control 



Unlike the desktop platform, mobile devices use the Virtual Keyboard to enter 
text as in the following image. The user can complete the action by clicking 
either "Done" or "Return". 



J2I 



http ://www. g oogle . cam/ 




□QSQDDODOD 



|a|s|d|f|g|h|j|k|l| 



o o 



return 



FireMonkey provides many types of event handlers to cover most actions taken 
by users. After the "Done" button is selected, the FireMonkey framework sends an 
OnChanqe event to the TEdit control. On the other hand, there is no specific 
event for the "Return" button. In this section, you implement event handlers to 
support both scenarios. 

Implement a Common Method to Open a Web Page 



Before implementing event handlers, first implement a common method to 
open a web page based on the Text property of the Edit control. 

1 . In the Code Editor , create the following new line: 

procedure openURL; next to { Private declarations } 
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type 



TForrr.34 = class (TForrr.) 

ToolBarl : TTaalBar; 

But t onl : TRut t on ; 

Editl: TEdit; 

WebBrowser 1 : TWefc Browser ; 
private 

{ Private declarations ) 

procedure OpenURL; 
public 

{ Public declarations } 
end; 

2. Press CTRL+SHIFT+C to create a placeholder at the end of the file: 

pro ce dure T Fo r ir.3 4 . Ope nURL ; 
begin 



3. Implement the OpenURL method as in the following code snippet: 

pro ce dure T Fo r ir.3 4 . Op e nURL ; 
begin 

WebBrowserl .Navigate (Editl .Text) ; 
end; 

Implement an Event Handler for the OnChange Event 

1 . In the Mobile Form Designer, select the Edit component, and then in the 
Object Inspector (Events tab), double-click the white space next to the 
OnChange event to create the event handler. 

The Object Inspector creates a new event handler called Editl Change: 



end; 




» 



+ 



Properties | Events 



LiveBindings 
OnApplyStyleLookuf 



OnChangeTracking 
OnClick 



OnCanFocus 
OnChange 



LiveBindings 



Editl Change 
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2. Complete the event handler by adding the following code: 



procedure TForir.34 . Edit 1 Change ( Sender : TOfcject) ; 
begin 

OpenURL;| 
end; 



Implement an Event Handler to Support the Enter Key 



There is no specific event defined for the Enter key. However, you can still 
monitor such events through the OnKevDown event. 

OnKeyDown gives information about the pressed key through several 
parameters in its event handler. You can implement this event as follows: 



procedure TForir.34 . Editl Key Down (Sender : TObject; var Key: Word; 

var KeyChar: Char; Shift: TShiftState} ; 
begin 

if (Key = vkReturn} then 
begi n 

OpenURL; 



// Change Focus to Back Button so that virtual keyboard is closed. 
Buttonl . Se t Focus; 
end; 
end; 



Implement an Event Handler for the Back Button 



To implement a Back button for your Web Browser, you can simply call the 
GoBack method on the Web Browser component: 



procedure TForir.34 . ButtonlClick (Sender : TObject); 
begin 

WebBrowserl . GoBsck; 
end; 



The basic behavior is now implemented for this Web Browser application. Try 
running your application on either the iOS Simulator or your iOS Device. 
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Step 3: Select the Proper Keyboard for the Web 
Browser Application 



After you run your first Web Browser application, you might realize that the 
Virtual Keyboard is not optimized. 



iOS provides several virtual keyboards as follows: 
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Select vktURL as the proper virtual keyboard in the KeyboardType property for 
the Edit control: 




I Properties | Events 



IS True 
MmDontCare 
[vktURL 



HitTest 
IrneMode 
KeyboardType 
LiveBindings vktAlphabet 
LiveBindings Designer vktDefault 
Locked 
Margins 
Name 
Opacity 
Padding 
Password 
PopupMenu 



vktEmailAddress 
vktNamePhonePad 
vktNumberPad 
vktNumbersAndPunctuation 
vktPhone Pad 

[IIZIIZ 



-fc 
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See Also 



• iOS Tutorial: Using Combo Box Components to Pick Items from a List in an 
iOS Application 

• iOS Tutorial: Using Tab Components to Display Pages in an iOS Application 

• TWebBrowser 

• TToolBar 

• TButton 

• TEdit 

• KevboardType 

• StyleLookup 
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iOS Tutorial: Using Tab Components to 
Display Pages in an iOS Application 

Tabs in FireMonkey iOS Applications 

Tabs are defined by FMXJabControlJTabControl , which is a container that can 
hold several tab pages: 

• Each tab page can contain any control as a Ul element. 

• You can hide the tab for these pages, and change pages without 
showing tabs. 



TabltemL 










© 


★ 


>□ 


Tablteni4 


TabltemS 


TabltemG 



For each tab, you can specify predefined icons as well as a custom icon, and a 
text label. 

Also, you can place tabs at either the top or the bottom of the control. 

Design Tab Pages Using the Form Designer 

To create tab pages in your application, use the TTabControl component with 
the following steps: 

1 . To create an HP FireMonkey mobile application , select File > New > 
FireMonkey Mobile Application - Delphi > Blank Application. Use the 

default target platform for iPhone (iOSSimulator). 
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2. Select TTabControl from the Tool 



Palette: 



Tool Palette WH%i 


- | ^ | Q, tab 


- dbExpress 


H TSQLTaWe 


- Common Controls 


£^ TTabControl 


k 


- Internet 


Name: TTabControl 




TDataSetTaWeF 
TQueryTaWePrt 
-£ TSQLQueryTabi 


Unit: FMX.TabControl 
Package: dclfmxstdlSO.bpl 
Supported platform:: 

iOS Device 

32-bit Windows 

64-bit Windows 

OSX 

iOS Simulator 




- InterBase 




H TIBTaUe 
TIBDatabase 











3. After you drop the TTabControl, an empty TabControl is shown on the 
FireMonkey Mobile Form Designer : 
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4. Typically, applications that use TabControl use the full screen to show 
pages. To do this, you need to change the default alignment of 
TabControl. In the Object Inspector , change the Align property of 
TabControl to alClient: 



J% Object In specto 
TabCon troll TTabControl 



| Properties | Events 




ActiveTab 

Align 

Anchors 

ClipChildren 

ClipParent 

Cursor 

DesignVisible 

DragMode 



alClient 




alContents 
alFlt 
alFitLeft 
alFitRight 



5. Right-click the TabControl, and select Items Editor... from the context 
menu: 



hems Editor... k 


Add Item 


I 


Edit 


1 


Control 


► 



Bind Visually.., 



6. Click Add Item three times, so that now you have three instances of 
Tabltem here. Close the dialog box. 



© ftemj Designer | { <=■ I 0 N P 




TflUteml 
'BKtem? 
TabftemS 


[ ^ ] | ^ ] | Onete | 
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8. You can place any component on each page. To move to a different 
page, just click the tab you want on the Form Designer, or change the 
ActiveTab property in the Object Inspector : 



^ Object Inspector ? S3 



la bControll TTabControl 


T 


| Properties | Events I 


+ 


ActiveTab Tabltem 1 


.A. 


+ 


Align ' . f\ 
Anchors Tabltem 2 - 
ClipChildren Tabltem 3 






ClipParent |0 False 


* 
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9. To change the location of tabs, select the TabPosition property for the 
TabControls component. For each tab, you can select any of the 
following values of the TabPosition property in the Object Inspector : 



TabOrder 
TabPosition 
Tag 
Touch 



tpTop 
tpBottom 
tpDots 

TouchTargetExpansS.^ 0 .!^ 

Visible USES^H 
Width HI 320 



tpTop 



tpBottom 



tpDots 



tpNone 









Tabs are 
displayed at the 
Top. 



Tabs are 
displayed at the 
Bottom. 



No Tabs are 
displayed. 
However, Dots or 
ellipsis ([...]) are 
displayed to 
indicate 

additional pages. 



No Tabs or Dots 
are displayed at 
run time, although 
you can see them 
at design time. 
Page can be 
changed only 
through code or 
action. 
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Use Custom Icons for Your Tabs 



You can use custom icons as well as custom text for tab pages by following 
these steps: 



1 . Place a TabControl , set its alignment ( Align property), and create several 
tabs on it: 



2. Select a tab, and select the ellipsis button [...] in the Bitmap field of the 
Customlcon property of TTabltem in the Object Inspector : 



Object Inspector 
Tablteml TTabltem 
| Properties | Events 




Cursor 
Customlcon 
>>j Bitmap 

iBitmapHiRes 
DesignVisible 
DragMode 
Enabled 



□■Default 
[Icon} 



[Bitmap) 
[7] True 
dmManual 
[7] True 



3. Select Edit... from the drop-down menu: 



Object Inspector 



Tablteml TTabltem 
| Properties | Events 



Cursor 
Customlcon 
>> 



crDefault 
[loan} 



(Bitmap) 



» I Bi tmap 

jBi Create New TBitmap Animation 
Des Create New TBitmapListAnimation 

Drai Edit... K 

EnabTea b^lTrue 
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4. In the Bitmap Editor click the Load... button, and select a PNG file. The 
recommended size is 30x30 pixels for normal resolution, and 60x60 pixels 
for high-resolution (you set the BitmapHiRes icon in the next step): 




5. Close the Bitmap Editor, and in the Object Inspector select the icon you 
want to use for the BitmapHiRes (high-resolution) field of Customlcon . 

6. Select tabitemcustom for the StyleLookup property in the Object 
Inspector. 



^ Object Inspector B^I^I 
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| Properties | Events I 
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7. In the Text property, change the text on the tab. 



i 5 Object Inspector 


[3 


Tablteml TTabltem 




| Properties | Events I 


» 

+ 
+ 


TabOrder 
Tag 


0 

0 




Text 


People 


TextAJign 
Touch 

TouchTargetExpans 


taCenter | People ^ 
[TTouch M a n agerj 
(TBounds) 



The custom glyphs used in this tutorial are available in your 
$(BDS)\lmages\GlyFX directory. 

After you define a custom icon, the FireMonkey framework generates a 
Selected Image and Non-Selected (dimmed) Image based on the given .png 
file. This transformation is done using the Alpha-Channel of the bitmap data. For 
example: 



Original Image 



Selected Image 



Non-Selected Image 





Embarcadero Technologies 



62 



Define Controls within a TabControl 



As discussed, each Tab Page can contain any number of controls including 
another TabControl. In such a case, you can easily browse and manage 
different tab pages in the Structure View : 



B iS Structure 



■B 



For m_2_5_ 

B TabltemT 
fj TabControl 2 
- H Tabltem4 
| - of TabControTT" 
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Changing the Page at Run Time 

By the User Tapping the Tab 

If Tabs are visible (when TabPosition property is set to other than tpNone), end 
user can simply Tap to Tab to switch between pages. 

By the Actions and an ActionList 

An action corresponds to one or more elements of the user interface, such as 
menu commands, toolbar buttons, and controls. Actions serve two functions: 

• Actions represent properties common to the user interface elements, such 
as whether a control is enabled or whether a check box is selected. 

• Actions respond when a control fires, for example, when the application 
user clicks a button or chooses a menu item. 

Here are the steps to enable a user to move to different tab pages by clicking a 
button: 

1 . On a FireMonkey mobile application, place a TabControl , and add 
several tab items on it (Tablteml, Tabltem2, and Tabltem3). 

2. From the Tool Palette , add a TButton to the form, and then add an 
ActionList component: 



0 Project28 • RAD Studio XE3 • Unrt25 
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32 -bit Windows 
64-btt Windows 
OSX 
iOS 
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3. Select the button component in the Object Inspector, and select Action | 
New Standard Action | Tab > TChangeTabAction from the drop-down 
menu. After the user clicks this button, the action you just defined is 
performed (the tab page changes): 



B -H Form25 




ActionListl 




[□] Button 1 




O -Q TabControl 1 
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4. Select ChangeTabActionl in the Structure View , and then select Tabltem2 
for the Tab property in the Object Inspector. By linking to Tabltem2, this 
action can change the page to Tabltem2: 
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5. With the previous step, now the caption (the Text property) of the button is 
automatically changed to "Go To Security" because the caption of 
Tabltem2 is "Security" in our example. Change the size of the button to fit 
the new caption text, or change the CustomText property of 
ChangeTabActionl component as shown here: 



O- n Form 25 

O ActionListl 
I E=l-t& (No Category) 

$H ChangeTabAction 1 
j-fS1 Button 1 
GEHlH TabControl 1 
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Category 
CustomText 
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6. ChangeTabAction also supports the Slide animation to indicate a 
transition between pages. To use it, set the Transition property to ttSlide: 



f£ Obj ect Inspector 
ChangeTabActionl TChangeTab Action 






Tag 
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Transition 


ttSlide M 



Visihlp 



ttNone 



Transition 



By Source Code 

You can use any of the following three ways to change the active tab page 
from your source code: 

• Assign an instance of TTabltem to the ActiveTab property: 



TabControll .ActiveTab := Tablteml; 
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• Change the Tablndex property to a different value. The Tablndex property 
is a zero-based Integer value (You can specify any number between o 

and TabControll . TabCount - l). 



TabControll .Tablndex := 1; 



• If ChangeTabAction is defined, you can execute an action from your 
code as well: 



// You can set the target at run time if it is not defined yet. 
ChangeTabActionl .Tab := Tabltem2; 

// Call the action 
ChangeTabActionl .Execute; 

See Also 

• iOS Tutorial: Using a Button Component with Different Styles in an iOS 
Application 

• iOS Tutorial: Using the Web Browser Component in an iOS Application 

• iOS Tutorial: Using ListBox Components to Display a Table View in an iOS 
Application 
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iOS Tutorial: Using ListBox Components 
to Display a Table View in an iOS 
Application 



Using ListBox Components to Display a Table View in 
an iOS Application 

On the iOS platform, FireMonkey uses the FMX.ListBox.TListBox component to 
present a Table View in the iOS style, like these ListBoxes: 
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This tutorial describes the basic steps to build items for a Table View in your 
FireMonkey iOS application. 
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Create Items on the ListBox Component 



1 . Select File > New > FireAAonkey Mobile Application - Delphi > Blank 
Application . 

2. Select the TListBox component in the Tool Palette , and drop it on the 
FireMonkev Mobile Form Designer . To find TListBox, enter a few characters 
(such as "tlist") in the Search box of the Tool Palette: 

MS)! Tool Palette 

Hi H tiist 

- Standard 
III TListBox K 

Name: TListBox 
Unit: FMX. ListBox 
Package: dclfmxstdlSO.bpl 
Supported platforms: 

iOS Device 

32 -bit Windows 

64-bit Windows 

OSX 

iOS Simulator 



3. Select the TListBox component on the Mobile Form Designer, go to the 
Object Inspector and select alClient for the Align property: 
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4. On the FireMonkey Mobile Form Designer, right-click the TListBox 
component, and select Items Editor: 






herm Ed**... K 




Addkcm ► 




Edit » 




Control ► 




Bind Visually... 




Align To God 




Revert to Inherited 



5. On the Items Designer, click the Add Item button several times to add 
several items to the ListBox: 
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6. Close the Items Designer. Now you can find your ListBox Items on the 
TListBox component. For example: 
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Add a Header 




You can define a Header on the TListBox component by using the following 
steps: 



1 . On the FireMonkey Mobile Form Designer, right-click the TListBox 
component, and select Add Item > TListBoxHeader: 



ListBoxItem4 
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Edit 
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2. On the Tool Palette, select the TLabel component and drop it on top of 
the TListBoxHeader component you just added: 




3. In the Object Inspector, change the properties of the TLabel component 
as follows: 



Property 
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Align 


alClient 


StyleLookup 
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TextAlign 


taCenter 


Text 


(Text value as you want) 
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Add a Group Header/Footer to the List 

You can define a Group Header and a Group Footer for items on TListBox as 
follows: 



L i st B oxG ro u pH ea der 1 



ListBoxIteml 



Li stB ox Item 2 
Li stB ox Item 3 



ListBoxltem4 



List BoxG roupFooteii 



1 . On the FireMonkey Mobile Form Designer, right-click the TListBox 
component, and select Items Editor. 

2. On the Item Designer, select TListBoxGroupHeader from the drop-down 
list, and then select Add Item: 
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3. Select TListBoxGroupFooter from the drop-down list, and then select Add 
Item. 

4. Select ListBoxGroupHeaderl in the list of items, and click the Up button 
several times until this item becomes the top item on the list: 
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5. Close the dialog box. Now you have a Group Header and a Group Footer 
on the TListBox component. 



Show List Items as Separate Grouped Items 



Items on a ListBox can be shown as either a Plain list or a Grouped list. This 
choice is controlled by the GroupingKind property and the StyleLookup 
property, as shown in the following graphic: 



Show Items as Plain List 



Show Items as Grouped List 



List BoxG ro u pH eader 1 



ListBoxlteml 
ListBox Item 2 
Li stB ox Item 3 
ListBoxlteml 
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r 



ListBoxlteml 



ListBoxltem2 



ListBoxltem3 



ListBoxltem4 



List BoxG roupFooter 1 



Li stB ox G roup Fo ote r 1 




gsPlain = GroupingKind Property Value 



gsGrouped = GroupingKind Property 
Value 



listboxstyle = StyleLookup Property 
Value 



transparentlistboxstyle = StyleLookup 
Property Value 



You can select either style for your TListBox component in the Object Inspector. 
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Add a Check Box or Other Accessory to a ListBox 
Item 



Each item in a TListBox can use an Accessory such as Check Mark through the 
ItemData.Accessory property. The following picture shows the value you can 
assign to ItemData.Accessory and the Accessory assigned: 



Values for I tern Data Accessory 
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aDetail 
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aMore 




aNone 





You can select the Accessory property in the Object Inspector when ListBox Item 
is selected in the Form Desiger. 
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Locked Q False 

Margins (TBounds) 



n 



Values for ItemData.Accessory 

o 



© aCheckmark 



aDetail 
aMore 



aNone 



Add an Icon to a ListBox Item 



o 

— Si 



Each Item on a ListBox component can contain Bitmap data, as an Icon, 
through the ItemData. Bitmap property: 
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You can select the Bitmap property in the Object Inspector when the ListBoxltem 
is selected in the Form Designer. 

Add Detail Information to an Item 



You can add additional text information to each item on the ListBox 
component. 



Specify additional text in the ItemData. Detail property, and select the location 
of the Detail Text through the StyleLookup property, as shown in the following 
table: 



StyleLookup property 



Look & Feel 



listboxitemnodetail 



ListBoxlteml 



listboxitembottomdetail 



ListBoxltemZ 

Detail 



listboxitemrightdetail 



ListBoxltemS 



Detail 



listboxitemleftdetail 



ListBoxitem4 Detail 
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Add Items to a ListBox from Your Code 

To add regular items to a ListBox, you can simply call the Items. Add method as 
following code: 

ListBoxl . Items .Add ( 'Text to add'); 

If you want to create items other than a simple item, or control other properties, 
you can create an instance of the item first, and then add it to the list box. 

The following code adds items to a ListBox, as shown in the picture: 





3J04 PM 


C3 




a 




> 


aa 






aaa 






B 


b 




> 


bb 






bbb 






c 


c 




> 


cc 






CCC 
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procedure TForm40 . FormCreate (Sender : TObject) ; 
var 

c: Char; 

i: Integer; 

Buffer: String; 

ListBoxItem : TListBoxItem; 

ListBoxGroupHeader : TListBoxGroupHeader ; 
begin 

ListBoxl . BeginUpdate; 
for c := 'a' to 'z' do 

begin 

// Add header ('A' to 'Z') to the List 

ListBoxGroupHeader := TListBoxGroupHeader . Create (ListBoxl ) ; 
ListBoxGroupHeader . Text := Uppercase (c) ; 
ListBoxl .AddObject (ListBoxGroupHeader) ; 

// Add items ('a', 'aa\ 'aaa\ 'b', f bb f , 'bob', 'c', ...) to the list 

for i := 1 to 3 do 

begin 

// StringOfChar returns a string with a specified number of repeating characters. 

Buffer := StringOfChar (c, i) ; 

// Simply add item 

// ListBoxl . Items .Add (Buffer) ; 

// or, you can add items by creating an instance of TListBoxItem by yourself 
ListBoxItem := TListBoxItem. Create (ListBoxl) ; 
ListBoxItem. Text := Buffer; 

// (aNone=0, aMore=l, aDetail=2, aCheckmark=3) 

ListBoxItem. ItemData .Accessory := TListBoxItemData . TAccessory (i) ; 
ListBoxl .AddObject (ListBoxItem) ; 
end; 
end; 

ListBoxl . EndUpdate; 
end; 
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Add a Search Box 



You can add a search box to a ListBox. With a search box, users can easily 
narrow down a selection from a long list as in the following pictures: 



iPod 3:3B PM E3'| 




E3 












p*c 


gl 


A 


c 


Alaska > 


California 




Arizona > 


Colorado 




Arkansas > 


Connecticut 




c 




California > 


Kentucky 




Colorado > 


M 


Massachusetts 




Connecticut > 




Michigan > 




Delaware > 





To add a Search Box to the ListBox component, right-click the TListBox 
component and simply select Add Item > TSearchBox from the context 
menu: 



Item: Editor.. 



Add Item 


► 


Edit 




Control 




Bind Visually... 




Align To Grid 




Revert to Inherited 





TListBoxItem 

TM etro p o I i E-UILi stB oxltern 
TListBoxHeader 
TSearchBox 



TLi stB oxG ro u p H ea d er 
TLi stB oxG ro u p Fo oter 
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See Also 

• FMX.ListBox.TListBox 

• iOS Tutorial: Using a Button Component with Different Styles in an iOS 
Application 

• iOS Tutorial: Using the Web Browser Component in an iOS Application 

• iOS Tutorial: Using Tab Components to Display Pages in an iOS Application 
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iOS Tutorial: Using Layout to Adjust 
Different Form Sizes or Orientations in 
an iOS Application 

This tutorial describes a general strategy for using one common form for different 
form factors (such as iPhone and iPad), without using different forms for each 
form factor. 

In the FireAAonkev Mobile Form Designer you can preview the user interface 
without running the application on a device — just change the device or 
orientation in the dropdown at the upper right corner: 



iPhone 



iPhone 



iPhone 5 
Cjstonn Device 



Every FireMonkey Component Can Have an Owner, a 
Parent and Children 

First, every FireMonkey component has the idea of Owner, Parent and Children. 
If you place a component on a form, the form becomes the owner and parent 
of the component. 

If you add components (for example, a Button, Label, and others) to another 
component (for example, a ToolBar), the ToolBar is both parent and owner of 
the Button, Label and others. You can see this parent-child relationship 
graphically represented in the tree view in the Structure View . 

The Layout for a child is defined as a value relative to its parent. In the following 
picture, Label 1 is the child of Toolbarl and the Layout of Label 1 is relative to 
Toolbarl . 
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Structure 

fa s»| ♦ ♦ 

B-n Form43 
fi-Q ToolBar 1 
El Button 1 




Using Common Layout- Related Properties of a 
FireMonkey Component 

Using the Align Property 

A control's Align property determines whether it is automatically repositioned 
and/or resized along its parent's four sides or center, both initially and as the 
parent is resized. The default value for the Align property is aINone, which means 
that no automatic calculations are performed: the control stays where it is 
placed. 



Typical values for the Align property are as follows (Dodgerblue indicates the 
area for the child): 



aINone 


alTop 


alBottom 


alLeft 


alRight 


alCenter 


alClient 








































u 






1 


□ 




■ 





















If you use an Align value of alTop, alBottom, alLeft or alRight for one 
component, the Align properties for other components use the remaining area. 

The size and shape of the remaining area (alClientj also changes based on the 
orientation of the device, and based on the form factor (iPhone or iPad). 
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The following pictures show the layout for landscape (horizontal) and for portrait 
(vertical) when you have two (2) components that use alTop, and one (1 ) 
component that uses alClient. 




a I Top 
alTop 



alClient 



Using the Margins Property 

Margins ensure separation between controls automatically positioned by a 
parent. 

In the following picture, the right side of the component (alClient) uses the 
Margins property to ensure space around the component. 




Using the Padding Property 



Padding sets aside space on the interior of the parent's content box. In the 
Object Inspector, you can set values (in pixels) for the Padding : 



• Left 

• Right 

• Bottom 

• Top 
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In the following picture, the parent component (which contains two regions) 
uses the Padding property to ensure space inside the parent component: 



Using the Anchors Property 

Anchors are needed when a control must maintain its position at a certain 
distance from the edges of its parent, or must stretch while maintaining the 
original distance between its edges and the edges of its parent. Anchored 
controls 'stick' to the sides of containers and stretch, if so specified. 

Anchors Property for the Edit Control 

If you have an Edit control on top of a ToolBar, you may want to keep a fixed 
distance between the right edge of the Edit Control and the edge of the form 
(ToolBar). Anchors enable you to specify that a control is to remain fixed in 
relation to the sides of its parent. 

If you want the Edit control to maintain the same relative position in relation to 
the ToolBar (its parent), you can set the Anchors property to akLeft, akTop, 
akRight. When the ToolBar is resized, the Edit control is resized according to the 
Anchors settings: 






j 
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Anchors Property for Button Control 



If you have a Button control at the right end of the ToolBar, you may want to 
keep the same distance between the right edge of the Button control and the 
edge of the Form. However, you might not want to maintain the same distance 
between the left edge of the Button control and the left edge of the Form. In this 
case, you can set the Anchors property to akTop, akRight (de-select akLeft), so 
that the Button control maintains the same distances with the ToolBar (parent) 
for Top and Right. 




Using the TLayout Component 

TLavout , a component that is not visible at run time, can be used to group its 
child controls to be manipulated as a whole. For example, you can set the 
visibility of a group of controls at one time by setting the Visible property of the 
layout. TLavout does not automatically set any of the properties of its children. 

To make selected controls children of TLayout, use the Structure View. 
Highlight the controls you want to move. Then drag the group of controls over 
the control that should be the parent, and drop the controls there. In the 
Structure View, the group of controls are now children of the new parent: 



1 . Initial State 





Structure 






] Form 1 




3 Button 1 




3| Button 2 




[□] CheckBox 1 




-H Layoutl 



2. Highlight the 
Controls to Move 



Structure 



O -n Forrml 



[□] Layoutl 
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B-n Forml 
(=}■■[□] Layoutl 





Button! 




n 


ButtonZ 




""7; 


CheckEo 
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You can use Align , Padding , Margins , Anchors , and other properties of TLayout 
to define the layout for a specific area. You can use the TLayout component just 
like the DIV tag in HTML. 
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Working with a Busy Interface: Using a 
TVertScrollBox Component 



In general, you do not want your form to have too many items, which can force 
users to scroll the user interface. In many cases, you can use a TabControl 
component with several pages to avoid any scrolling. 

If you need to place many items on your form, you can use a TVertScrollBox 

component to define a scrolling area as described here: 



1 . Select Custom Device on FireMonkev Mobile Form Designer . 









Cjstorm Device T 




iPad 
iPhone 
iPhone 5 


[Custom Device 







2. Change the size of the Custom Device by dragging the edge of the 
designer to the shape and size you want. 

3. Drop a TVertScrollBox component, and set its Align property to alClient. 

This causes the TVertScrollBox to fill the client area. 

4. Locate components on the TVertScrollBox component: 
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You can scroll this form at run time as you swipe the user interface. 



See Also 



• iOS Tutorial: Using ListBox Components to Display a Table View in an iOS 
Application 

• iOS Tutorial: Using Location Sensors on the iOS Device 

• Tutorial: Using FireMonkey Layouts 

• FireMonkey Layouts Strategies 

• Arranging FireMonkey Controls 

• Gestures in FireMonkey 
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iOS Tutorial: Taking and Sharing a 
Picture in an iOS Application 

Before starting this tutorial, you should read and perform the following tutorial: 

• iOS Tutorial: Using a Button Component with Different Styles in an iOS 
Application 

This tutorial covers the following typical tasks for using pictures in an iOS 
application: 



Taking a picture with the iOS 
device camera 



Using a picture from 
the iOS device Photo 
Library 



Sharing or printing a 
picture 






This functionality is provided as Actions , and you need to write only one line of 
code for each task. 

An action corresponds to one or more elements of the user interface, such as 
menu commands, toolbar buttons, and controls. 



Actions serve two purposes: 

• An action can represent properties common to the user interface 
elements — such as whether a control is enabled or whether a check box is 
selected. 

• An action can respond when a control fires — such as when the user clicks 
a button or chooses a menu item. 
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In this tutorial, you learn how to assign actions to user interface elements (such 
as a button) for each functionality that you want to support. 

Building the User Interface for the Application 

The user interface of this sample application is quite simple, as shown in the 
following picture: 



10:57 AM S 






m r <x 








AcFonListl 

TImage 



Place the following components on the Form Designer: 

• TToolBar component 

o Three TButton components. Each button uses different icons, 
o Set the StyleLookup property for the three buttons to 

cameratoolbuttonbordered, searchtoolbuttonbordered, and 

actiontoolbuttonbordered, respectively. 

• TImage component 

o Set the Align property to alClient. 

• TActionList component 

Taking a Picture with the iOS Device Camera 

You can define an action to take a photo using the camera on the iOS device 
by using the following steps: 

1 . On the Form Designer, select the button (for taking a photo). 

2. In the Object Inspector, select the drop-down list for the Action property. 

3. Select New Standard Action | Media Library | 
TTakePhotoFromCameraAction: 
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4. On the Events tab, expand the Action node, and then double-click the 
OnDidFinishTaking event. 
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5. Add the following code to the OnDidFinishTaking event handler: 



procedure TForml . TakePhotoFromCameraActionlDidFinishTaking ( Image : TBitmap) 
begin 

Image 1 . Bitmap .Assign (Image) ; 
end; 



This code assigns a picture taken from the iOS device camera to the Bitmap 
property of the Tlmage component. 

Using a Picture from the iOS Device Photo Library 



You can define an action to use a photo from the Photo Library with the 
following steps: 

1 . On the Form Designer, choose the button that you want to use (for 
picking up a photo). 

2. In the Object Inspector, click the drop-down list for the Action property 
and select New Standard Action | Media Library | 

TTa ke P h oto Fro m Li bra ry Ac tio n . 
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3. In the Events tab, expand the Action node, and then double-click the 
OnDidFinishTaking event. 

4. Add the following code to the OnDidFinishTaking event handler: 



procedure TForml . TakePhotoFromLibraryActionlDidFinishTaking ( Image : TBitmap) ; 
begin 

Image 1 . Bitmap .Assign (Image) ; 
end; 



The code above assigns a picture taken from the Photo Library to the Bitmap 
property of the Tlmage component. 

Sharing or Printing a Picture 

From an iOS app, you can share a photo on social networking sites (such as 
Facebook and Twitter), you can send the picture to a printer, use the picture as 
an attachment to e-mail, assign it to Contacts, and so on. 




Mail Twitter Facebook 



Assign to Save to Print 

Contact Camera Roll 




This multi-share service is called Share Sheet Functionality, and you can 

implement this functionality using the following steps: 

1 . On the Form Designer, select a button (for sharing a photo). 

2. In the Object Inspector, click the drop-down list for the Action property, 
and select New Standard Action | Media Library | 
ShowShareSheetAction. 

3. On the Events tab, expand the Action node, and then double-click the 
On Before Execute event. 
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4. Add the following code to the On Before Execute event handler: 

procedure TForml . ShowShareSheetActionlBef oreExecute (Sender : TObj ect ) / 
begin 

ShowShareSheetActionl . Bitmap .Assign ( Image 1 . Bitmap) ; 
end; 

The code above assigns a picture on the Tlmage component to "Share Sheet 
Functionality". 

After you select Facebook from the list of services, you can post the picture on 
Facebook with your comment: 




^ Add Location Friends %!f^ 



See Also 

• iOS Tutorial: Using Location Sensors on the iOS Device 

• iOS Tutorial: Using the Notification Center on the iOS Device 

• FireMonkey Actions 

• FMX.StdCtrls.TButton 

• FMX.Objects.Tlmage 

• FMX.MediaLibrary 

• http://appleinsider.com/articles/12/02/16/share sheets twitter integration 

to make mountain lion more social/ 
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iOS Tutorial: Using Location Sensors on 
the iOS Device 

Before starting this tutorial, you should read and perform the following tutorial 
sessions: 

• iOS Tutorial: Using ListBox Components to Display a Table View in an iOS 
Application 

• iOS Tutorial: Using the Web Browser Component in an iOS Application 

• iOS Tutorial: Using Layout to Adjust Different Form Sizes or Orientations in an 
iOS Application 

This tutorial describes the basic steps to locate your iOS device (using latitude 
and longitude), and to use Reverse Geocoding to convert to a readable 
address, such as in the following picture: 



Location Demo 
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Design the User Interface 



This demo application is designed with two major components: a TListBox (on 
the left-hand side) and a TWebBrowser . 




• In the TListBox, set the Align property to aiLeft to reserve the left side of 
the Ul. Then create the following subcomponents under the ListBox: 
o a TListBoxHeader component with the following sub-components: 

■ a TLabel component to show the title "Location Demo" 

■ a Switch (Switch 1 ) component to select on/off of 
TLocationSensor 

o a TListBoxGroupHeader with the text "Your Location" 
o a TListBoxltem with the name "ListBoxltemLatitude" and "Latitude" as 
text 

o a TListBoxltem with the name "ListBoxltemLongitude" and "Longitude" 
as text 

o a TListBoxGroupHeader with the text "Current Address" 
o a TListBoxltem with the name "ListBoxltemAdminArea" and 

"AdminArea" as text 
o a TListBoxltem with the name "ListBoxltemCountryCode" and 

"CountryCode" as text 
o a TListBoxltem with the name "ListBoxltemCountryName" and 

"CountryName" as text 
o a TListBoxltem with the name "ListBoxltemFeatureName" and 

"FeatureName" as text 
o a TListBoxltem with the name "ListBoxltemLocality" and "Locality" as 

text 
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o a TListBoxltem with the name "ListBoxltemPostalCode" and 

"PostalCode" as text 
o a TListBoxltem with the name "ListBoxltemSubAdminArea" and 

"SubAdminArea" as text 
o a TListBoxltem with the name "ListBoxltemSubLocality" and 

"SubLocality" as text 
o a TListBoxltem with the name "ListBoxltemSubThoroughfare" and 

"SubThoroughfare" as text 
o a TListBoxltem with the name "ListBoxltemThoroughfare" and 

"Thoroughfare" as text 
• a TWebBrowser component (WebBrowserl ) to show the Web Page 
(Google Maps). Set the Align property to aiciient. 

After you create these components, select all TListBoxltem items and select 
listboxitemleftdetail in the StyleLookup property. This allows TListBoxltem to show 
both a label and detailed text. 

The Location Sensor 

The location sensor is wrapped by the TLocationSensor component. 

TLocationSensor fires an OnLocationChanged event when the device detects 
movement. You can adjust the sensitivity of TLocationSensor using the Distance 
property. If you set Distance to "10", TLocationSensor fires an 
OnLocationChanged event when you move "1 0 meters". 

Read Location Information (Latitude, Longitude) from 
the locationsensor component 

First, the TLocationSensor component needs to be activated for use. You can 
turn on/off TLocationSensor based on your input, such as a TSwitch component, 
or other Application events. 

Here is a code snippet to control TLocationSensor based on the change of value 
in the TSwitch component: 



procedure TForm4 4 . SwitchlSwitch (Sender : TObject) ; 
begin 

LocationSensorl .Active := Switchl . IsChecked; 
end; 
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As discussed earlier, TLocationSensor fires an OnLocationChanged event when 
you move the iOS device. You can show the current location (Latitude and 
Longitude) using parameters with this event handler as follows: 



procedure TForm44 . LocationSensorlLocationChanged (Sender : TObj ect; 

const OldLocation, NewLocation: TLocationCoord2D) ; 
begin 

/ / Show current location 

ListBoxItemLatitude . ItemData . Detail : = NewLocation . Latitude . ToString; 
ListBoxItemLongitude . ItemData . Detail : = NewLocation . Longitude . ToString; 
end; 



Show the Current Location Using Google Maps via a 
TWebBrowser Component 

As discussed in the iOS Tutorial: Using the Web Browser Component in an iOS 
Application , the TWebBrowser component wraps a Web browser for iOS. 

You can call Google Maps from the TWebBrowser component with the following 
URL parameters: 

https : //maps . google . com/maps ?q= (Latitude-value) , (Longitude- 
value) &output=embed 

So you can add this URL to your previously created event handler 
OnLocationChanged as follows: 



procedure TForm44 . LocationSensorlLocationChanged (Sender : TObj ect; 

const OldLocation, NewLocation: TLocationCoord2D) ; 
var 

URLString: String; 
begin 

// code for previous step goes here 

// Show Map using Google Maps 
URLString := Format ( 

' https : / /maps . google . com/maps ?q=%s, %s&output=embed ' , 

[NewLocation . Latitude . ToString, NewLocation . Longitude . ToString] ) ; 
WebBrowserl .Navigate (URLString) ; 
end; 
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Use Reverse Geocoding 



TGeocoder is an object which wraps the Geocoding (or Reverse Geocoding) 
service. 

Geocoding is the process of transforming geographic data, such as the address 
and zip code, into geographic coordinates. Reverse geocoding is the process 
of transforming geographical coordinates into other geographical data, such as 
the address. 

In this case, we use TGeocoder to "Reverse Geocode" our location (in Latitude 
and Longitude) to readable address information. 

Here is the basic sequence of actions with TGeocoder: 

1 . Create an instance of TGeocoder. 

2. Define an event OnGeocodeReverse so that you can receive the event 
later. 

3. Set data to execute "Reverse Geocoding". 

4. TGeocoder accesses the service on the network to resolve the address 
information. 

5. TGeocoder fires an OnGeocodeReverse event. 

6. Your iOS App receives the address information through the parameter on 
the OnGeocodeReverse event and updates the user interface. 

As TGeocoder is not a component (this is just a class), you need to define these 
steps through your code (you cannot drop a component, nor assign an event 
handler through the Object Inspector). 



First, define a new field "FGeocoder: TGeocoder" in the private section of the 
form. You can also define an "OnGeocodeReverseEvent procedure" as in the 
following code snippet. 



type 




TForm44 = class (TForm) 




// IDE defines visible (or non-visual) 


components here automatically 


private 




{ Private declarations } 




FGeocoder: TGeocoder; 




procedure OnGeocodeReverseEvent (const 


Address: TCivicAddress) ; 


public 




{ Public declarations } 




end; 
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After you define these 2 lines, go to the line of the OnGeocodeReverseEvent, 
and type CTRL+SHIFT+C. This creates the following procedure in your code (that 
you will use later): 



procedure TForm4 4 . OnGeocodeReverseEvent (const Address: TCivicAddress ) ; 
begin 

end; 



Now you can create an instance of TGeocoder and set it up with data with the 
following code. 

TGeocoder.Current gives the type of class that actually implements the 
Geocoding Service. The code in " TGeocoder . Current . Creat e" calls the constructor 
(Create) for the specified type, and saves it to the FGeocoder field. You also 
need to specify an event handler, which is fired when TGeocoder completes 
Reverse Geocoding. Assign OnGeocodeReverseEvent (which you just defined in 
the previous step) to FGeocoder.OnGeocodeReverse. 

Finally, if you successfully created an instance of TGeocoder, and TGeocoder is 

not running, call TGeocoder.GeocodeReverse with location information. After 
TGeocoder receives data, the OnGeocodeReverseEvent event is fired. 



procedure TForm44 . LocationSensorlLocationChanged (Sender : TObj ect; 

const OldLocation, NewLocation: TLocationCoord2D) ; 
begin 

// code for previous steps goes here 

/ / Setup an instance of TGeocoder 
if not Assigned (FGeocoder) then 
begin 

if Assigned (TGeocoder . Current) then 

FGeocoder := TGeocoder . Current . Create; 
if Assigned (FGeocoder) then 

FGeocoder.OnGeocodeReverse := OnGeocodeReverseEvent; 

end; 

// Translate location to address 

if Assigned (FGeocoder) and not FGeocoder . Geocoding then 
FGeocoder . GeocodeReverse (NewLocation) ; 

end; 
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Show a Readable Address in the ListBox Component 



As described earlier, after Reverse Geocoding is completed, an 
OnGeocodeReverseEvent is fired. 



Next, assign properties in the TCivicAddress address parameter to show 
readable address information in the list box fields: 



procedure TForm4 4 . OnGeocodeReverseEvent ( const 


Address: TCivicAddress); 


begin 








ListBoxItemAdminArea . ItemData . Detail 




Address 


. AdminArea; 


ListBoxItemCountryCode . ItemData . Detail 




Address 


. CountryCode; 


ListBoxItemCountryName . ItemData . Detail 




Address 


. CountryName ; 


ListBoxItemFeatureName . ItemData . Detail 




Address 


. FeatureName; 


ListBoxItemLocality . ItemData . Detail 




Address 


. Locality; 


ListBoxItemPostalCode . ItemData . Detail 




Address 


. PostalCode; 


ListBoxItemSubAdminArea . ItemData . Detail 




Address 


. SubAdminArea; 


ListBoxItemSubLocality . ItemData . Detail 




Address 


. SubLocality; 


ListBoxItemSubThoroughf are . ItemData . Detail 




Address 


. SubThoroughf are; 


ListBoxItemThoroughf are . ItemData . Detail 




Address 


. Thoroughfare ; 


end; 









See Also 

• iOS Tutorial: Using Layout to Adjust Different Form Sizes or Orientations in an 
iOS Application 

• iOS Tutorial: Using the Notification Center on the iOS Device 

• System.Sensors.TGeocoder 

• FMX.Sensors.TLocationSensor 
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iOS Tutorial: Using Notification Center 
on the iOS Device 

This tutorial describes the basic steps to use the Notification Center on your iOS 
device. 

Three Basic Notification or Alert Styles 

When users set notifications for apps on their iOS devices, notifications can be 
delivered from apps in the three basic styles shown here. The banner appears 
briefly, but the alert requires dismissal by the user. 

Badge on Application Icon 




Notification Banner on iPad 




Notification Alert 
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Notification Center on iPad 



The following image shows the iPad Notification Center, where the user can pull 
down the list of all recent notifications: 



Tap to Tweet 



Projectl 


X 


^ Projectl 

Delphi for iOS is here! 


now 




Access the Notification Service 

The notification service interface ( IFMXNotificationCenter ) is defined as one of 
the FireMonkey Platform Services ( TPIatformServices ) . 

To access the notification service, do these two things: 

• Add the following 2 units to the uses clause if they are not present: 



uses 

FMX. Platform, FMX .Notification; 



• Run a query of the FireMonkey Platform Services using the following code: 



Notif icationService : IFMXNotificationCenter; 
begin 

if TPIatformServices . Current . SupportsPlatf ormService (IFMXNotificationCenter) then 
Notif icationService := 
TPIatformServices . Current . GetPlatf ormService ( IFMXNotificationCenter) as 
IFMXNotificationCenter; 

// Use the Notification Service 
end; 



The IFMXNotificationCenter interface provides basic services to use the Icon 
Badge Number as well as the Notification. 



Embarcadero Technologies 



100 



Set the Icon Badge Number from Code 



IFMXNotificationCenter has the SetlconBadgeNumber method to define the 
Icon Badge Number: 



procedure TForml . SerlconBadgeNumber ; 
var 

Notif icationService : IFMXNotificationCenter; 
begin 

if TPlatf ormServices . Current . SupportsPlatf ormService (IFMXNotificationCenter) then 
Notif icationService := 
TPlatf ormServices . Current . GetPlatf ormService ( IFMXNotificationCenter) as 
IFMXNotificationCenter; 

// Reset Icon Badge Number 

if Assigned (Notif icationService) then 

Notif icationService . SetlconBadgeNumber (18) ; 

end; 



After you set the Icon Badge Number to 1 8, you can see it on your iOS Home 
Screen: 




You can also reset the Icon Badge Number using the ResetlconBadgeNumber 
method: 



procedure TForml .ResetlconBadgeNumber; 
var 

Notif icationService : IFMXNotificationCenter; 
begin 

if TPlatf ormServices . Current . SupportsPlatf ormService (IFMXNotificationCenter) then 
Notif icationService := 
TPlatf ormServices . Current . GetPlatf ormService ( IFMXNotificationCenter) as 
IFMXNotificationCenter; 

// Set Icon Badge Number 

if Assigned (Notif icationService) then 

Notif icationService . ResetlconBadgeNumber; 

end; 
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Schedule Notification 



You can also schedule Notification Messages using the ScheduleNotification 
method. 

To show a Notification Message, you need to create an instance of the 
TNotification class, and then define the Name (Identifier) and the Message: 



procedure TForml . ScheduleNotification; 
var 

Notif icationService : IFMXNotif icationCenter ; 
Notification: TNotification; 
begin 

if TPlatf ormServices . Current . SupportsPlatf ormService ( IFMXNotif icationCenter ) then 
Notif icationService := 
TPlatf ormServices . Current . GetPlatf ormService ( IFMXNotif icationCenter ) as 
IFMXNotif icationCenter; 

if Assigned (Notif icationService) then 

begin 

Notification := TNotification . Create; 
try 

Notif ication .Name := ' MyNotif ication ' ; 

Notif ication .AlertBody := 'Delphi for iOS is here!'; 

// Fired in 10 second 

Notif ication. FireDate := Now + EncodeTime ( 0 , 0 , 10 , 0 ) ; 

// Send notification in Notification Center 
Notif icationService . ScheduleNotification (Notification) ; 
finally 

Notification . Freer- 
end; 
end 
end; 



After you set the Notification Message, you can see it on top of your iOS Home 
Screen: 
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Update or Cancel a Scheduled Notification Message 



Each Scheduled Notification Message is identified through the Name property 
of the TNotification object. 

To update a scheduled notification, simply call ScheduleNotification again with 
an instance of TNotification that has the same name (Name property). 

To cancel a scheduled notification, you can simply call the CancelNotification 
method with the identifier you used: 



procedure TForml . CancelNotification; 
var 

Notif icationService : IFMXNotif icationCenter ; 
begin 

if TPlatf ormServices . Current . SupportsPlatf ormService ( IFMXNotif icationCenter ) then 
Notif icationService := 
TPlatf ormServices . Current . GetPlatf ormService ( IFMXNotif icationCenter ) as 
IFMXNotif icationCenter; 

if Assigned (Notif icationService) then 

Notif icationService . CancelNotification ( ' MyNotif ication ' ) ; 

end; 
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Present the Notification Message Immediately 



You can also show the notification message immediately through 
PresentNotification . 

To show a notification message, you need to create an instance of the 
TNotification class, and then define the Name (Identifier) and the Message: 



procedure TForml . PresentNotification; 
var 

Notif icationService : IFMXNotif icationCenter ; 
Notification: TNotification; 
begin 

if TPlatf ormServices . Current . SupportsPlatf ormService ( IFMXNotif icationCenter ) then 
Notif icationService := 
TPlatf ormServices . Current . GetPlatf ormService ( IFMXNotif icationCenter ) as 
IFMXNotif icationCenter; 

if Assigned (Notif icationService) then 

begin 

Notification := TNotification . Create; 
try 

Notif ication .Name := ' MyNotif ication ' ; 

Notif ication .AlertBody := 'Delphi for iOS is here!'; 

// Set Icon Badge Number as well 

Notif ication . ApplicationlconBadgeNumber := 18; 

// Show Notification Message 

Notif icationService . PresentNotification (Notification) ; 
finally 

Notification . Freer- 
end; 
end; 
end; 



Embarcadero Technologies 



104 



Notification Banner or Notification Alert 

By default, your application shows the notification banner: 
• Notification Banner on iPad 




Notification Alert 




To use a notification alert instead of a notification banner, the end user needs to 
change the notification Style through the Notification Center configuration 
page: 



3:11 PM 




Notification Center 
Show 



5 Recent Items > 



Alert Style 











































None 


Alerts 



Alerts require an action before proceeding. 
Banners appear at the top of the screen and 
go away automatically. 



Badge App Icon 
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Add Action to the Notification Alert 



You can also customize an alert by adding an Action button. 

To customize an Alert Action, you need to set the action to the AlertAction 
property, and then set the HasAction property to True, as follows: 



Notification := TNotif ication . Create; 
try 

Notification .Name := ' MyNotif ication ' ; 

Notification .AlertBody := 'Delphi for iOS is here!'; 

Notification .AlertAction := 'Code Now!'; 
Notification . HasAction := True; 

// Fired in 10 seconds 

Notification. FireDate := Now + EncodeTime ( 0 , 0 , 10 , 0 ) ; 
// Show Notification Message 

Notif icationService . ScheduleNotif ication (Notification) ; 
finally 

Notification . Free; 
end; 




See Also 

• iOS Tutorial: Taking and Sharing a Picture in an iOS Application 

• iOS Tutorial: Using Location Sensors on the iOS Device 

• FMX. Notification. I FMXNotificationCenter 
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iOS Tutorial: Using InterBase ToGo in an 
iOS Application 



Before starting this tutorial, you should read and perform the following tutorial 
session: 

• iOS Tutorial: Using ListBox Components to Display a Table View in an iOS 
Application 

This tutorial describes the basic steps to browse data managed by InterBase 
ToGo on your iOS device through the dbExpress framework. 




2:18 PM 



DEMO 



Atlantic Spadefish 

Ghaetodiperus faber 



Bat Ray 

Myilioftalis californica 



Blue Angelfish 

Pomacanthus nauarchus 

Blue head Wrasse 

Thalassoma bifasciatum 
Cabezon 

Scorpaenichlhys marmoratus 

California Moray 

Gymriothorax mordax 

Clown Triggerfish 

Ballistoides conspicillum 

Dog Snapper 

Lutjanus jocu 

Firefish 



Using dbExpress to Connect to the Database 

dbExpress is a very fast database access framework, written in Delphi. RAD 
Studio provides drivers for most major databases, such as InterBase, Oracle, DB2, 
SQL Server, MySQL, Firebird, SQLite and ODBC. You can access these different 
databases using procedures similar to the procedure described here. 

• For the iOS platform, dbExpress supports InterBase ToGo as well as SQLite. 
These database products can run on iOS devices. 
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• For other databases, such as Oracle, you need to have at least a client 
library. On Windows platforms, the client library is provided as a DLL to 
connect to. Therefore, you need to develop applications using middle-tier 
technologies such as DataSnap to connect to these database products 
from iOS devices. 

Another tutorial discusses how to connect to Enterprise Database without using 
a client library on iOS device; see iOS Tutorial: Connecting to an Enterprise 
Database from an iOS Client Application . 

Design and Set Up the User Interface 

This tutorial uses one TListBox component as the Ul element. 
To set up a ListBox component, use the following steps: 

1 . To create an HP FireMonkev Mobile Application , select File > New > 
FireMonkey Mobile Application - Delphi > Blank Application. 

2. Drop a TListBox component on the form. 

3. In the Object Inspector , set the following properties of the ListBox: 

o Set the Align property to alClient, so that the ListBox component 

uses the entire form, 
o Set the DefaultltemStyles.ltemStyle property to 

list boxite m botto m d eta il . 

4. Right-click the TListBox component in either the Designer or the Editor, 
select Add Item, and add the following components: 

o TListBoxHeader component, 
o TSearchBox component. 



10:57 AM mm> | 
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Poiibon ► 
fhp Children > 
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5. Close the Items Designer. 

6. Add a TLabel component to the TListBoxHeader, and set the following 
properties in the Object Inspector: 

o Set the Align property for the TLabel component to alClient. 
o Set the StyleLookup property to toollabel. 
o Set the TextAliqn property to taCenter. 
o Set the Text property to DB DEMO. 
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Connecting to the Data 



Following are the basic steps to connect to data in a database using dbExpress: 



1 . On the Tool Palette , double-click the TSQLConnection component. 



H!)! Tool Palette 


Jp £3 


^ - | | | Q> sql 




□ dbExpress 


| 


| ?^ TSQLConnection |\ 



fjj TSQLDataSet 



2. In the Object Inspector, set the following properties for TSQLConnection: 
1 . This app uses InterBase ToGo, so set the Driver property to 
IBLite/ToGo. 



t 


-j= Object Inspector 






SQLConnectionI TSQLConnection 




| Properties | Events I 




Connected 


□ False 






ConnectionName 






+ 


Driver 


IBUte/ToGo 






KeepConnection 


ASA 




+ 


LiveBindings Designer 
LoadPararnsOnConnect 


ASE 

DataSnap 






LoginPrornpt 
Name 


DbZ 
Firebird 




+ 


Params 

TableScope 

Tag 


K 

Informix ^ 

InterBase Server 

MSSQL 

MSSQL9 

MySQL 

ODBC 

Orade 

Sqlite 


J 



2. Set the LoginPrornpt property to False, so that the user is not 
prompted for a login. 

3. Click the ellipsis [...] for the Params property, and set the Database 
value to C:\Users\Public\Documents\RAD 
Studio\11.0\Samples\Data\dbdemos.gdb (location of the 
database); then close the dialog box: 
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© Value List Editor 
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gds32.dll 




VendorLibWin64 


ibtogo64.dll 
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libibtogo.dylib 




Database 
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Password 
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LocaleCode 
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Code Editor. 



Cancel 



Help 



4. Set the Connected property to True. 



Note: If you get an error ("unavailable database") on development 
environment, this means you do not have a current license for InterBase. 
The license of InterBase Developer Edition is included as part of the 
product for some product editions. For more information, see 
Troubleshooting . 

3. Add a TSQLDataSet component to the form, and set the following 
properties: 

1 . Set the SQLConnection property to SQLConnectionl (the one that 
you added in a previous step). 

2. Set the CommandText property to select common_name, species_name 

from BIOLIFE order by COMMON_NAME. 

3. Set the Active property to True. 
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4. Open the LiveBindings Designer and connect the data and the user 
interface as follows: 

1 . Click COMMON_NAAAE in BindSourceDBl , and drag the mouse 
cursor to Item.Text in ListBoxl . 



LiveBindings Designer 



Form3 - Default Layer 



▼ Layers 
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H 
0 
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2. Click SPECIES_NAME in BindSourceDBl , and drag the mouse cursor 
to Item. Detail in ListBoxl . 
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Deploying your Application to iOS 



Up to this point, you have used InterBase on your desktop. This means that the 
actual database is located at your local hard disk drive (for example, 
C:\Users\Public\Documents\RAD StudioM 1 .0\Samples\Data\dbdemos.gdb). 
On the iOS Device, the application is sand-boxed, and typically you can only 
read and write data that is located in the Documents folder under your 
application folder. 

To connect to a local database on iOS, you need to perform the following 
actions: 

• Deploy the database to the iOS Device. 

• Change the configuration (to connect to the database file) to a local file 
under the Documents folder. 

Deploy InterBase ToGo, dbExpress Driver, and the Database File to iOS 

To execute your application on iOS, you need to deploy the following files: 

• Interbase ToGo 

• dbExpress Driver to InterBase 

• The database file (dbdemos.gdb) 

1 . Open the Deployment Manager by selecting Project > Deployment. 

2. Select All-Configurations - iOS Simulator platform from the drop-down list 
of target platforms at the top of the Deployment Manager. 

3. Select Add Featured Files f & ): 



4. Select the following database modules, and then click OK to close the 
Featured Files dialog box: 
o InterBase ToGo 
o DBExpress InterBase Driver 
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5. Select Add Files, and select the database file (for example, 
C:\Users\Public\Documents\RAD 
StudioM 1 .0\Samples\Data\dbdemos.gdb). 




1 

ork\OS\Ph 



6. Select dbdemos.gdb, and change Remote Path to StartUp\Documents\. 



JC^J ^ ^ %q All configurations - iOS Simulator platform 



Local Path ▼ 


Local Name 


Type 


Platforms 


Remote Path 


Remote Name 


[7] . .V .V .V ■V 5 ublicV)ocuments^AD Stu. . . 
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File 
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7. Select the Platforms column (double-click the ellipsis [...] in the row for 
dbdemos.gdb): 

1 . Ensure that iOS Simulator and iOS Device are present for dbdemos.gdb. 

2. Remove Win32 from the list if it is present (you do not have to copy 
database files to the Win32 platform). 

8. Select All-Configurations - iOS Device platform, and make sure 
dbdemos.gdb is set to be deployed to StartUp\Documents\. 

As you just configured, the database file (dbdemos.gdb) is to be deployed to 
the Documents folder in the sandbox area of your iOS app. 
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Modify Your Code to Connect to a Local Database File on iOS 

As described in the previous step, the TSQLConnection component is 
connected to a database on your local file system with an absolute path. So 
you need to replace the location of the file before connecting to the database, 
as follows: 

1 . In the Form Designer, select the SQLConnectionl component. 

2. In the Object Inspector, double-click the Value field of the BeforeConnect 
event. 

3. Add the following code to this event handler: 



procedure TForml . SQLConnectionlBef oreConnect (Sender : TObject) ; 
begin 

{ $IFDEF IOS} 

SQLConnectionl . Params .Values [ ' Database ' ] 
:= GetHomePath + PathDelim 

+ 'Documents' + PathDelim + ' dbdemos . gdb ' ; 
{ $ENDIF} 
end; 



The GetHomePath function gives you the actual home location of an iOS app. 
Using the PathDelim constant is recommended, as PathDelim specifically uses 
the path delimiter of the target platform (instead of hard-coded delimiters, such 
as \ or /). 
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Run Your Application on the iOS Simulator or an iOS 
Device 



Now your application is ready to run. You should be able to browse data just as 
you can in the IDE. You can also narrow down the list using the Search Box as 
shown in the second image: 
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Troubleshooting 



InterBase License Issues 

If you get an error ("unavailabale database") when you connect to the 
database in the development environment, this means you do not have a 
current license for InterBase. 

• A license for InterBase Developer Edition is included as part of the product 
for some product editions. 

• To activate the license of InterBase Developer Edition for a registered RAD 
Studio installation, go to the Embarcadero Product License Manager (click 
Start | All Programs | Embarcadero InterBase XE3). 

Exception Handling Issues 

If your application raises an exception without having proper exception 
handling code, your iOS app simply crashes (disappears) at run time. 

If you encounter a crash, you might want to connect manually to the 
database while you troubleshoot the issue using the following steps: 

1 . Select the SQLConnectionl component, and change the 
Connected property to False. 

2. Drop a button on the form, and create the following event handler 
to manually connect to the database: 



procedure TForml . ButtonlClick (Sender : TObject) ; 
begin 
try 

SQLConnectionl . Connected := True; 
SQLDataSetl .Active := True; 
except 

on e: Exception do 
begin 

ShowMessage (e .Message) ; 
end; 
end; 
end; 
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Typical Errors and Resolutions 



Following are typical errors that you might encounter when you connect to the 
database, and suggestions for resolving the issues: 



Error on iOS 



Suggestion 



1 /private/ var/mobi le/Applicat ions/93 

79876A-EE1 A-41 C2-A1 C5- 
860FBE07FDF6/Documents/dbdem 
os.gdb" 
Error while trying to open file 
No such file or directory 



Check whether the dataBase file (dbdemos.gdbj is 

delivered to 'StartUp\Documents\'. 



Your user name and 

not defined. Ask your database 
administrator to set up an InterBase 
login. 



Check whether the license file is delivered for InterBase 
ToGo. 



Unable to complete network 

request to host "C". 
Failed to locate host machine. 
The specified name was not found 
in the hosts file or Domain Name 
Services. 



Check whether you pointed to the local file (add an 
event handler for the OnBeforeConnect event of the 
SQLConnectionl component). 



See Also 



• InterBase ToGo with dbExpress 

• http://www.embarcadero.com/products/interbase/product-editions 

• iOS Tutorial: Using SQLite in an iOS Application 

• iOS Tutorial: Connecting to an Enterprise Database from an iOS Client 
Application 
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iOS Tutorial: Using SQLite in an iOS 
Application 

Before starting this tutorial, you should read and perform the following tutorial 
session: 

• iOS Tutorial: Using ListBox Components to Display a Table View in an iOS 
Application 

This tutorial describes the basic steps to use SQLite as a local data storage on 
your iOS device through the dbExpress framework. 
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Coffee 
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Using dbExpress to Connect to the Database 



dbExpress is a very fast database access framework, written in Delphi. RAD 
Studio provides drivers for most major databases, such as InterBase, Oracle, DB2, 
SQL Server, MySQL, Firebird, SQLite, and ODBC. You can access these different 
databases using procedures similar to the procedure described here. 

• For the iOS platform, dbExpress supports InterBase ToGo as well as SQLite. 
These database products can run on iOS devices. 

• For other databases, such as Oracle, you need to have at least a client 
library. On Windows platforms, the client library is provided as a DLL to 
connect to. Therefore, you need to develop applications using middle-tier 
technologies such as DataSnap to connect to these database products 
from iOS devices. 

Another tutorial discusses how to connect to Enterprise Database without using 
a client library on iOS device; see iOS Tutorial: Connecting to an Enterprise 
Database from an iOS Client Application . 

Creating the Database in the Windows Environment 
for Development Purposes 

First, you need to create a SQLite database file on your Windows development 
platform. Use the following steps, so that you can use the Mobile Form Designer 
to design the user interface of your iOS App. 

Create the Database in the Data Explorer 

1 . Go to Data Explorer , right-click the SQLite node and select Add New 
Connection: 



1 • i 




Refresh 








Add New Connection ^ 





2. Define the name of the connection, such as ShoppingList. 



Add SQLite Connection 














Name for connection: ShoppingList 








[ Cancel 
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3. Specify the location of the database file: 





4. Click the Advanced button and open the Advanced Properties dialog. 

5. Change the FaillfMissing property to False and then close the dialog: 



@ Advanced Properties: Shop ping List 



1 - | B 



Value 

C: Risers Vmarai.EMB ARC ADERO documents ^ AD Studio fro; 
SQLite 

TDBXSqliteDri verLoader r DBXSqliteDri ver 1 70 . bpl 
Data.DbxSqlite 



Property 
Database 
DriverNarne 
DriverPackageLoader 
DriverUnit 
FaillfMissing 

MetaDataPackageLoader TDBXSqliteMetaDataCornrnandFactor y r DbxSqliteDri ver 1 70 . b 



Connection String 

DriverNarne =SQLite; Dri verUnit=Data . DbxSqlite; DriverPackageLoader =TDBXSqliteDri ver ^ 
Loader r DBXSqliteDri ver 1 70 . bpl; MetaDataPackageLoader =TDBXSqliteMetaDataCornrnan 
dFactory r DbxSqliteDri ver 170. bpl; FaillfMissing =False; "Database =C : \Users 



OK 



Cancel 



Note: Setting FaillfMissing to False instructs the Data Explorer to create a 
new database file if the file is not available. 

6. Click the Test Connection button. With this operation, the new database 
file is created if no file existed: 



Projectl - RAD Studio XE3.5 - Unitl [Built] 



Test connection succeeded 



OK 
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Create Table on DataExplorer 

1 . On the Data Explorer , select the ShoppingList node under the SQLite 
section, and then select New Table from context menu. 

(=}- Cg) SQLite 

0D| ShoppingList 
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2. Specify a column titled Shopltem as value = TEXT. 
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3. Click the Save button and specify a table name (for example, Item.) 
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Design and Set Up the User Interface 




TListBox 



This tutorial uses one TListBox component as the Ul element. 

To set up a ListBox component and other Ul elements, use the following steps: 



1 . Create a FireMonkey Mobile application using File > New > FireAAonkey 
Mobile Application - Delphi. 

2. Drop a TToolBar on the form. 

3. Drop a TButton on the ToolBar component. 

4. Set the following properties in the Object Inspector : 

o Set the Name property to Button Add. 

o Set the StyleLookup to addtoolbuttonbordered. 

5. Drop a TButton on the ToolBar component. 

6. Set the following properties in the Object Inspector : 

o Set the Name property to ButtonDelete. 
o Set the StyleLookup to deletetoolbutton. 
o Set the Text to Delete, 
o Set the Visible to False. 

7. Drop a TLabel on the ToolBar component. 

8. Set the following properties in the Object Inspector : 

o Set the Align to alClient. 

o Set the StyleLookup to toollabel. 

o Set the Text to Shopping List. 
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o Set the TextAlign to taCenter. 

9. Drop a TListBox component on the form. 

10. Set the following properties in the Object Inspector : 

o Set the Align property to alClient, so that the ListBox component 
uses the entire form. 

Connecting to the Data 

Following are the basic steps to connect to data in a database which is already 
defined in the Data Explorer : 

1 . Select the Item table on the Data Explorer and drag it to the Form 
Designer. 





Note: This creates two components (ShoppingList: TSQLConnection and 
Item: TSQLDataSet ) on the form. 



ShoppingList 



]ten 



2. Select the ShoppingList component on the form, and then change the 
Connected property to True. 

3. Select the Item component on the form, and then change the Active 
property to True. 

4. Select View > LiveBindings Designer and the LiveBindinqs Designer opens. 
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5. Select Shopltem in the Item component and drag Shopltem to ListBoxl . 



c Pi LiveBindings Designer 

Form 1 - Default Layer 



a 
0 



Shoplteifi- 



ListBoxl 



SelectedValue 



JSynch 



Item Text 



Item. Detail 



Item. Bitmap 



Item. Accessory 



Item.LookupData 



ItemHeader.Text 



ItemHeader.Break 



Following these steps connects the app's user interface with data on a SQLite 
database. If you used a table with existing data for this tutorial, now you should 
see actual data within the Form Designer. 

Creating the Event Handler to Make the Delete 
Button Visible When the User Selects an Item from 
the List 

The Visible property for the Delete button is set to False. Therefore, by default, 
the end user does not see this button. You can make it visible when the user 
selects an item on the list, as follows: 

• Select ListBoxl and define the following event handler for the OnltemClick 
event. 



procedure TForml . ListBoxlItemClick (const Sender: TCustomListBox; 

const Item: TListBoxItem) ; 
begin 

ButtonDelete .Visible := ListBoxl . Selected <> nil; 
end; 
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Creating the Event Handler for the Add Button to 
Add an Entry to the List 




Bird ngsUstl 



The next step is adding a feature to this application for adding an item to the 
shopping list. 

1 . Drop a TSQLQuery component to the form. 

2. Set the following properties in the Object Inspector : 

o Set the Name property to SQLQuerylnsert. 

o Set the SQLConnection property to ShoppingList. 

o Set the SQL property as follows: 

INSERT INTO ITEM (Shopltem) VALUES (: Shopltem) 

o Select the Expand (...) button on the Params property. 

o Select the Shopltem parameter and set DataType to ftString: 
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Object Inspector 



SQLQu eryln sert. Pa ra m s[0] TPararm [T] 

| Properties | Events I 



+ 



DataType 
Name 

NurnericScale 

PararnType 

Precision 

Size 

Value 



.ftStrjnci... 



Shopltem 

0 

ptlnput 

0 
0 




3. In the Form Designer, double-click the AddButton component. Add the 
following code to this event handler: 



procedure TForml . ButtonAddClick (Sender : TObject) ; 




var 




TaskName: Strings- 




begin 




try 




if InputQuery ( 'Enter New Item', 'Name', TaskName) and (TaskName . Trim <> ' 


) then 


begin 




SQLQuerylnsert . ParamByName (' Shopltem' ) .AsString := TaskName; 




SQLQuerylnsert.ExecSQL () ; 




Item. Refresh; 




ButtonDelete .Visible := ListBoxl . Selected <> nils- 




end; 




except 




on e: Exception do 




begin 




ShowMessage (e .Message) ; 




end; 




ends- 




end; 
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The InputQuery function shows a dialog box asking the end user to enter text. 
This function returns True when the user selects OK, so that you can add data to 
the database only when the user selects OK and the text contains some data. 




Embarcadero Technologies 



127 



Creating the Event Handler for the Delete Button to 
Remove an Entry from the List 

The next step is adding a feature to this application to remove an item from the 
shopping list: 

1 . Drop a TSQLQuery component to the form. 

2. Set the following properties in the Object Inspector : 

o Set the Name property to SQLQueryDelete. 

o Set the SQLConnection property to ShoppingList. 

o Set the SQL property as follows: 

delete from Item where Shopltem = : Shopltem 

o Select the Expand (...) button on the Params property. 

o Select the Shopltem parameter and set DataType to ftString. 

3. In the Form Designer, double-click the DeleteButton component. Add the 
following code to this event handler. 



procedure TForml . ButtonDeleteClick (Sender : TObject) ; 
var 

TaskName: Strings- 
begin 

TaskName := ListBoxl . Selected. Text; 
try 

SQLQueryDelete . ParamByName (' Shopltem' ) .AsString := TaskName; 
SQLQueryDelete . ExecSQL ( ) ; 
Item. Refresh; 

ButtonDelete .Visible := ListBoxl . Selected <> nil; 
except 

on e: Exception do 
begin 

SHowMessage (e .Message) ; 
end; 
end; 
end; 



Modifying Your Code to Connect to a Local Database 
File on iOS 

The basic features of this application are now implemented. As you worked in 
the Data Explorer, you created a database file on Windows. The database file is 
not available on your iOS device unless you copy it to the iOS Device or create it 
on the fly. 
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You can create a SQLite Database and Table with the following steps: 
Specifying the Location of the SQLite Database on the iOS Device 



1 . In the Form Designer, select the ShoppingList component. 

2. In the Object Inspector , double-click the BeforeConnect event. 

3. Add the following code to this event handler: 



procedure TForml . SQLConnectionSQLiteBef oreConnect ( Sender : 


TObject) ; 


begin 




{ $IFDEF IOS} 




ShoppingList . Params .Values [' Database ' ] := GetHomePath + 


PathDelim + 


'Documents' + PathDelim + ' shoplist . s3db ' ; 




{ $ENDIF} 




end; 





The GetHomePath function gives you the actual home location of an iOS app. 
Using the constant System.SysUtils.PathDelim is recommended, as PathDelim 

specifically uses the path delimiter of the target platform (instead of hard-coded 
delimiters, such as \ or /). 

Creating a Table if None Exists 

With SQLite you can create a table when no table exists, by using the create 
table if not exists statement. You can create a table after the 
TSQLCOnnection component connects to the database and before the 
TSQLDataSet component connects to the table. Use the following steps: 

1 . In the Form Designer, select the ShoppingList component. 

2. In the Object Inspector , double-click the AfterConnect event. 

3. Add the following code to this event handler: 



procedure TForml . ShoppingListAf terConnect (Sender : TObject); 
begin 

ShoppingList. ExecuteDirect ( 'CREATE TABLE IF NOT EXISTS Item (Shopltem TEXT NOT NULL) ' ) ; 
end; 
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Running Your Application on the iOS Simulator or on 
an iOS Device 

Now your application is ready to run (select Run > Run ). 

If you have an issue with running the application, follow the steps given in 
Troubleshooting . 




See Also 



iOS Tutorial: Using InterBase ToGo in an iOS Application 

iOS Tutorial: Connecting to an Enterprise Database from an iOS Client 

Application 

SQLite support in XE3 
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iOS Tutorial: Connecting to an 
Enterprise Database from an iOS Client 
Application 

Before starting this tutorial, you should read and perform the following tutorial 
session: 

• iOS Tutorial: Using ListBox Components to Display a Table View in an iOS 
Application 

• iOS Tutorial: Using InterBase ToGo in an iOS Application 



This tutorial describes how to connect to an Enterprise database from an iOS 
client application. 

To connect to an Enterprise Database, you need to have a client library. In most 
cases, the client library is provided by the database vendor in DLL format. This 
strategy does not work well for iOS Devices because no client library is available. 
To resolve this issue, you can develop a middle tier to connect to an Enterprise 
Database, and your iOS application can talk with the middle tier. RAD Studio 
provides the DataSnap framework with which you can develop the middle tier 
(and access the middle tier) with almost no coding required. This tutorial 
describes the steps to develop the middle tier and then develop the iOS client. 



MySQL. 



SQLServer 



ORACLE 



Informix SYBASE 




Database Server 



iOS Application 
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Creating the Middle Tier, a DataSnap Server 



First, create a DataSnap server that exposes a table from a database server. This 
tutorial uses a DataSnap Server VCL Forms Application as a DataSnap server. 

Note: In this tutorial, the DataSnap server (VCL application) functions as the 
middle tier in a multi-tiered database application. You can easily create and 
later delete an instance of a DataSnap server. After you understand the basic 
steps, you can convert the middle tier to a Windows service application. 

Create a DataSnap Server VCL Application 



1 . Create a new project. Choose File > New > Other and from the New Items 
dialog select Delphi Projects > DataSnap Server > DataSnap Server in 

order to create a new Delphi project. 



I..* NtawKcrat 

* DefehFrepai 

GsLsSrup Server 

MoWe Reject* 



L3 Yfrfj5P*D 
Bt&Qfl Project! 



RE5«" *• . Server 



Tth Data&iep-Sc-ver Wwd iff, lies *n ti&f way 
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2. The New DataSnap Server wizard appears and you need to follow its steps 
without modifying too many parameters. 




3. In the New DataSnap Server wizard: 

1 . At first step, choose VCL Forms Application as application type. 

2. At the second step, choose the TCP/IP protocol, Server Methods 
Class and Sample Methods from the Server Features list. 

3. At the third step, leave the default TCP/IP communications port to 
21 1 . This will ensure that the communication between the client and 
the server will pass through the default DataSnap port. 

4. At the final step (number four) select TDSServerModule as the 
ancestor for the Server Methods. 

4. Save the form unit as DataSnapServerUnit.pas. 

5. Switch to DataSnapServerUnit, and change the Name property of the 
Form to DSServerForm. 

6. Save the server methods unit (by default as created by the Wizard: 
ServerMethodsUnitl) as ServerModuleUnit.pas. 

7. Save the server container unit (by default as created by the Wizard: 
ServerContainerUnitl) as ServerContainerUnit.pas. 
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8. Save the new project as DataSnapServerProject.droj. 

9. Select ProjectGroupl in the Project Manager and save the project as 
DataSnapTutorialProjectGroup.groupproj. 



File 








II 


(=}-[j|p DataSiii 


Show in Explorer 




li- Build I 
EB- C Targe 






Add New Project... 




H- B DataS 
&■}■ B Serve 


Add Existing Project... 




Save Project Group 






Save Project Group As... ^ 






Rename 






Add to Version Control 
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Define a DataSet on the DataSnap Server 



1 . Switch to the ServerContainerUnit.pas file and replace the uses clause in 

the implementation With: uses Winapi. Windows, ServerModuleUnit; 

2. Switch to the ServerModuleUnit.pas file. 

3. In the Form Designer, change the Name property of the Server Module to 
DSServerModule_EMPLOYEE. 

4. Configure the following components on the Server Module: 

o Drop a TSQLConnection component on the Server Module, and set 
the following properties: 



TSQLConnection encapsulates a dbExpress connection to a database 
server. 



Set the Name property to SQLConnection_EMPLOYEE. 
Set the LoginPrompt property to False. 
Set Driver to InterBase. 

Expand the Driver node, and set the DataBase property to 
C: \ Users\ Public \ Documents\ RAD 
Studio\11.0\Samples\Data\EMPLOYEE.GDB. 

Change the Connected property to True. If you get an error, 
double-check the Driver properties: 



& 5 

? InterBase (SQLConnectioo^PLOYS) 



SQt Connect™ t MPtOYK TSQtCamecbcn 
Properties Everts 



» Corrected 

GonnectnrNvnf 

- Onvtr 



C:\U*e«\Public\Documeiit»\RAD 



StrverOwSet 



DftegttaNvne 
• OetegateComecfton 

XetpConnccton J True 

LOMf»ar»n0OnCorvwct ;F*e 
LogrPrompt f«Ke 

Name SQLConnecliof>_^«.OYS 



1 .0 Vnmptei\D*tj\i MP! OYt LGDB | 



o Drop a TSQLDataSet component on the Server Module, and set the 
following properties: 

TSQLDataSet represents the data retrieved using dbExpress. 

■ Set the Name property to SQLDataSet_EAAPLOYEE. 

■ Set the SQLConnection property to 
SQLConnection_EAAPLOYEE. 
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■ Set the CommandTvpe property to ctTable. 

■ Set the CommandText property to EMPLOYEE. 

■ Change the Active property to True. If you get an error, 
double-check the properties you just configured. 

o Drop a TDataSetProvider component on the Server Module, and set 
the following properties: 

TDataSetProvider packages data from a dataset and passes one or more 
transportable data packets to the DataSnap client. 



Set the Name property to DataSetProvider_EMPLOYEE. 
Set the DataSet property to SQLDat aSet_EMPLOYEE: 

f^J Welcome Page DataSnapServerUnit ServerModuleUnit 



□ 



JO, 



::::::: :::::::::::::: oi ::::::::::::: eg::::::: 

: SQLConnection_EMPLOYEE: '. '. SQLDataSet_EMPLOYEE! :DataSetProvider_EMPLOVEE 



Note: This tutorial uses InterBase as an example. However, you can connect to 
any database server using the same steps. Select the proper driver, and other 
properties to point to your database. 

Expose the DataSet from the DataSnap Server 



You have just created a new Server Module that contains a DataSet and a 
DataSetProvider that packages data to the next layer. The next step is to expose 
the Server Module to the DataSnap client. 

1 . In the Form Designer, open ServerContainerUnit. 

2. Select DSServerClassI , and update the existing event handler for the 
OnGetClass event. Add the following code to the DSServerClassI event 
handler: 



procedure TServerContainerl . DSServerClasslGetClass (DSServerClass : TDSServerClass ; 

var PersistentClass : TPersistentClass) ; 
begin 

PersistentClass := TDS Serve rModule_EMPLOYEE ; 
end; 



With this event handler, the DataSnap Server exposes providers as well as public 
methods in this class to a DataSnap client. Based on the steps in the previous 
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section, now you are going to expose the DataSetProvider_EMPLOYEE 
DataSetProvider component to your DataSnap client. 



Run the DataSnap Server 

Implementation of the DataSnap Server is complete. Right-Click 
DataSnapServerProject.exe and select Run Without Debugging. 



DataSna pServerPro] ect.d pro] 


- Project Manager 


[715] 


B *$\ & Si - \% 


fe fe | ^1 t S | 4 t 0 




File 


DataSnapTutorialProjectGroup 






Fff Da ta Sn a pServerProject exe 


Compile 

Build 

Clean 

From Here ► 




ij-^J Build Configurations (Debug) 
ej -Q Target Platforms (Win32) 
B-}-- [13] DataSnapSer verUnit. pas 
B-}- B ServerModuleUnit.pas 






Run 






Run Without Debugging [\, 





Now you can see the DataSnap server running on your Windows machine. 
Because this DataSnap server has no Ul element, it looks like a blank form, and 
this is as expected at this point. 
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Creating an iOS Application that Connects to the 
DataSnap Server 



The next step is creating the iOS client application. 



1 . In the Project Manager , right click DataSnapTutorialProjectGroup, and 

select Add New Project... 



DataSnapServerProiect.dproj - Project Manager ^ S3 

m | * m -| 




<4 - G - 


File 




[=} [Jl DataSnapServerProj 

Build Configurations 
|j}- C Target Platforms (W 




Show in Explorer 




Add New Project... ^ 
Add Existing Project... 


&■}■■ B DatsSnapServerUnit 




EB- B ServerModuleUnit.pt 




Save Project Group 



2. Select FireMonkey Mobile Application on the Delphi Projects page: 



@ ^*ewhemJ 
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<\ Search 
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Console Control Panel 0ynam<4nk 
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nanK-fci 
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eMonk* 
Mobie 
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FreWonkev FreMonkey FireMonkey 
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Appk«Oon 



►CI Package Resource 041 




3. Save the new Unit as DataSnapClientUnit.pas. 

4. Save the new Project as DataSnapClientProject.droj. 

5. Open DataSnapClientUnit, and change the Name property of the Form to 
DSCIientForm. 

6. Drop the following components on the FireMonkey Mobile Form Designer : 

o TSQLConnection component (SQLConnection 1 ) 



TSQLConnection encapsulates a dbExpress connection to a database 
server. Also, it supports the DataSnap server. 
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■ Set the Driver property to DataSnap. 

■ Expand the Driver property, and set the HostName property 
to the host name of the DataSnap server. 

■ Set the LoginPrompt property to False. 

■ Set the Connected property to True. 

If you see an error, please double-check the properties you have just set. 

o TDSProviderConnection component (DSProviderConnection 1 ) 

TDSProviderConnection component provides connectivity to the 
DataSnap server using dbExpress. 

■ Set the SQLConnection property to SQLConnectionl . 

■ Set ServerClassName to TDSServerAAodule_EMPLOYEE. This 
name needs to match the name of the class of the Server 
Module of the DataSnap server. 

■ Set the Connected property to True. 

o TCIientDataSet component (ClientDataSetl ) 

TCIientDataSet implements a database-independent dataset, and this 
can be used as a local in-memory buffer of the records from another 
dataset. 

■ Set the RemoteServer property to DSProviderConnectionl . 

■ Set the ProviderName property to DataSetProvider_EAAPLOYEE. 

This name needs to match the name of the provider for the 
DataSnap server. 

■ Set the Active property to True, 
o TListBox component 

■ Set the Align property to alClient: 
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7. Open the LiveBindings Designer and connect the data and user interface 
as follows: 

1 . Click FULL_NAME in BindSourceDBl , and drag the mouse cursor to 
I tern. Text in ListBoxl : 



& xH LiveBindings Designer 

DSClientForm - Default Layer 



ClientDataSefl 



n r 



ListBoxl 
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Item. Lookup Data 



ItemHeader.Text 



ItemHeader.Break 



2. Now you have created and configured the DataSnap Client on 
iOS. You should be able to see the data coming from the DataSnap 
server in the IDE: 
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Deploy the MIDAS Library to iOS Simulator 



To execute your application on the iOS Simulator, you need to deploy the 
following files: 

• MIDAS Library 

1 . Open the Deployment Manager by selecting Project > Deployment. 

2. Select Add Featured Files ( & ): 





4> $a 1 *" 


Local Path t 
\j\ iOSSimulatoi 




Add Featured Files.| 



3. Select the following module, and then click OK to close the Deployment 
Manager: 

o MIDAS Library 



@ Featured Files 



+ 


□ 


InterBase Client 


+ 


□ 


InterBase ToGo 


+ 


□ 


DBExpress InterBase Driver 


+ 


□ 


DBExpress DBZ Driver 


+ 


□ 


DBExpress Firebird Driver 


+ 


□ 


DBExpress MySQL Driver 


+ 


□ 


DBExpress Orade Driver 


+ 


□ 


DBExpress Informix Driver 


+ 


□ 


DBExpress MSSQL Driver 


+ 


□ 


DBExpress MSSQL9 Driver 


+ 


□ 


DBExpress Sybase ASA Driver 


+ 


□ 


DBExpress Sybase ASE Driver 


+ 




MIDAS Library 


+ 


□ 


Database Adapter 



0K d 




Cancel 
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Run Your Application on the iOS Simulator, or on an 
iOS Device 

Now your application is ready to run. 

In the Project Manager , select either the iOS Simulator or the iOS Device target 
platform, and run your application. You should be able to browse data just as 
you do within the IDE. 

See Also 

• iOS Tutorial: Using InterBase ToGo in an iOS Application 

• iOS Tutorial: Using SQLite in an iOS Application 

• Developing DataSnap Applications 

• Understanding Multi-tiered Database Applications 

• Datasnap.DSServer.TDSServer 
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